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 0 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 a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.