React Slim Image Viewer
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
Installation
npm install react-slim-image-vieweror
yarn add react-slim-image-viewerAPI
| 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 |
Shortcuts
| Shortcut | Description |
|---|---|
| Escape | Close the viewer |
| Right Arrow / l | Next image |
| Left Arrow / h | Previous image |
| Mouse wheel | Scrolling previous / next image |
Contributing
PRs and issue reports are welcome!
Testing pre-release version
npm run build:lib- Copy the built files to where you want to use them. Example (standing in a
project that you want to test the new version in):
cp -r ../react-slim-image-viewer/lib/* node_modules/react-slim-image-viewer/