Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
react-images-viewer
Advanced tools
Create an react-images-viewer component.
Weekly downloads
Readme
A react library that view photos list easily, and a simple, responsive viewer component for displaying an array of images.
# recommended
yarn add react-images-viewer
or
npm install react-images-viewer --save
import React from "react";
import ImgsViewer from "react-images-viewer";
export default class Demo extends React.Component {
render() {
return (
<ImgsViewer
imgs={[
{ src: "http://example.com/img1.jpg" },
{ src: "http://example.com/img2.png" },
]}
currImg={this.state.currImg}
isOpen={this.state.viewerIsOpen}
onClickPrev={this.gotoPrevious}
onClickNext={this.gotoNext}
onClose={this.closeViewer}
/>
);
}
}
Live Demo: guonanci.github.io/react-images-viewer
yarn install
yarn
yarn start
Then open localhost:8000
in a browser.
Example using srcSet:
<ImgsViewer
imgs={IMG_SET}
...
/>
const IMG_SET = [
{
src: "http://example.com/img1.svg",
caption: "A forest",
// As an array
srcSet: [
"http://example.com/img1_1024.jpg 1024w",
"http://example.com/img1_800.jpg 800w",
"http://example.com/img1_500.jpg 500w",
"http://example.com/img1_320.jpg 320w",
],
},
{
src: "http://example.com/img2.svg",
// As a string
srcSet:
"http://example.com/img2_1024.jpg 1024w, http://example.com/img2_800.jpg 800w, http://example.com/img2_500.jpg 500w, http://example.com/img2_320.jpg 320w",
},
];
Property | Type | Default | Description |
---|---|---|---|
backdropCloseable | boolean | false | Allow users to exit the viewer by clicking the backdrop |
closeBtnTitle | str | undefined | Customize close esc title |
enableKeyboardInput | boolean | true | Supports keyboard input - space, esc , arrow left, arrow up , and arrow right, arrow down |
currImg | number | 0 | Required if you want to navigate the imgsViewer, The index of the image to display initially |
customControls | arr | undefined | An array of elements to display as custom controls on the top of viewer |
imgs | arr | undefined | Required. Array of image objects, See img opts table below |
imgCountSeparator | str | ' / ' | Customize separator in the image count |
isOpen | boolean | false | Required if you want to navigate the imgsViewer, Whether or not the viewer is displayed |
leftArrowTitle | str | undefined | Customize of left arrow title |
onClickPrev | function | undefined | Required if you want to navigate the imgsViewer, and fired on request of the previous image |
onClickNext | function | undefined | Required if you want to navigate the imgsViewer, and fired on request of the next image |
onClose | function | undefined | Required if you want to close the imgsViewer, and handle closing of the viewer |
onClickImg | function | undefined | Handle click on current image |
onClickThumbnail | function | undefined | Handle click on thumbnail |
preloadNextImg | boolean | true | Whether to preload the next available image |
rightArrowTitle | str | undefined | Customize right arrow title |
showCloseBtn | boolean | true | Optionally display a close 'X' button in top right corner |
showImgCount | boolean | true | Optionally display image index, e.g., "2 of 20" |
width | number | 1024 | Maximum width of the carousel; defaults to 1024px |
spinnerDisabled | boolean | false | Disable Spinner |
spinner | function | DefaultSpinner | Spinner component class |
spinnerColor | str | '#fff' | Color of spinner |
spinnerSize | number | 50 | Size of spinner |
preventAutoScroll | boolean | true | Determines whether auto-scrolling is prevented |
| Property | Type | Default | Description |
| :------- | :-------- | :---------- | :---------- | -------- |
| src | str
| undefined
| Required |
| srcSet | string[] | string
| undefined
| Optional |
| caption | str
| undefined
| Optional |
| alt | str
| undefined
| Optional |
FAQs
Create an react-images-viewer component.
The npm package react-images-viewer receives a total of 4,479 weekly downloads. As such, react-images-viewer popularity was classified as popular.
We found that react-images-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.
Security News
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.