Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-simple-image-viewer
Advanced tools
Readme
Simple image viewer component for React.
$ npm install react-simple-image-viewer
or
$ yarn add react-simple-image-viewer
import React, { useState, useCallback } from 'react';
import { render } from 'react-dom';
import ImageViewer from 'react-simple-image-viewer';
function App() {
const [currentImage, setCurrentImage] = useState(0);
const [isViewerOpen, setIsViewerOpen] = useState(false);
const images = [
'http://placeimg.com/1200/800/nature',
'http://placeimg.com/800/1200/nature',
'http://placeimg.com/1920/1080/nature',
'http://placeimg.com/1500/500/nature',
];
const openImageViewer = useCallback((index) => {
setCurrentImage(index);
setIsViewerOpen(true);
}, []);
const closeImageViewer = () => {
setCurrentImage(0);
setIsViewerOpen(false);
};
return (
<div>
{images.map((src, index) => (
<img
src={ src }
onClick={ () => openImageViewer(index) }
width="300"
key={ index }
style={{ margin: '2px' }}
alt=""
/>
))}
{isViewerOpen && (
<ImageViewer
src={ images }
currentIndex={ currentImage }
disableScroll={ false }
closeOnClickOutside={ true }
onClose={ closeImageViewer }
/>
)}
</div>
);
}
render(<App />, document.getElementById('app'));
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 |
backgroundStyle | object | Custom styles for background of modal window |
disableScroll | boolean | Disable scrolling images by mouse wheel |
closeOnClickOutside | boolean | Whether viewer should be closed when clicking outside of image |
closeComponent | JSX.Element | Custom component for the close button |
leftArrowComponent | JSX.Element | Custom component for the left arrow |
rightArrowComponent | JSX.Element | Custom component for the right arrow |
Shortcut | Description |
---|---|
Escape | Close the viewer |
Right Arrow / l | Next image |
Left Arrow / h | Previous image |
Mouse wheel | Scrolling previous / next image |
FAQs
Simple image viewer component for React
The npm package react-simple-image-viewer receives a total of 8,000 weekly downloads. As such, react-simple-image-viewer popularity was classified as popular.
We found that react-simple-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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.