react-slim-image-viewer
Advanced tools
Display images in a full-screen modal, with left and right navigation to switch between several images. Supports keyboard navigation and mouse scroll. Tiny library with zero dependencies (except React).
This React component is heavily inspired by (aka copied from) react-simple-image-viewer by specter256, thanks for your work Alexander!
The screenshot above shows what this component looks like with default styling.
The "prev" navigation arrow is highlighted because my mouse cursor is hovering
it. You can change the name of the CSS classes used to disable the default
styles if you want to provider your own. Or you can pass in a styles prop to
customize the styles. Your choice.
You can see a usage example here: https://github.com/Tobbe/react-slim-image-viewer/blob/main/src/App.tsx
npm install react-slim-image-viewer
or
yarn add react-slim-image-viewer
| Property | Type | Description |
|---|---|---|
| src | string[] | Array of image URLs |
| currentIndex | number | Index of image in src property which will be shown first when viewer is opened |
| onClose | function | Callback which will be called when viewer will closed |
| styles | RsivStyles | Custom styles for all html elements of the modal window |
| baseClassName | string | Change the base part of the css class name. This will disable built-in styles |
| Shortcut | Description |
|---|---|
| Escape | Close the viewer |
| Right Arrow / l | Next image |
| Left Arrow / h | Previous image |
| Mouse wheel | Scrolling previous / next image |
PRs and issue reports are welcome!
npm run build:libcp -r ../react-slim-image-viewer/lib/* node_modules/react-slim-image-viewer/FAQs
Slim image viewer for React
The npm package react-slim-image-viewer receives a total of 3 weekly downloads. As such, react-slim-image-viewer popularity was classified as not popular.
We found that react-slim-image-viewer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.
Security News
Snyk's use of malicious npm packages for research raises ethical concerns, highlighting risks in public deployment, data exfiltration, and unauthorized testing.