Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
react-spring-lightbox
Advanced tools
A flexible image gallery lightbox with native-feeling touch gestures and buttery smooth animations, built with react-spring.
React-spring-lightbox is a flexible image gallery lightbox with native-feeling touch gestures and buttery smooth animations.
Mousewheel
, swipe or click+drag to page photosMousewheel
or Trackpad Pinch
to zoomyarn add react-spring-lightbox
import React, { useState } from 'react';
import Lightbox from 'react-spring-lightbox';
const images = [
{
src:
'https://timellenberger.com/static/blog-content/dark-mode/win10-dark-mode.jpg',
alt: 'Windows 10 Dark Mode Setting'
},
{
src:
'https://timellenberger.com/static/blog-content/dark-mode/macos-dark-mode.png',
alt: 'macOS Mojave Dark Mode Setting'
},
{
src:
'https://timellenberger.com/static/blog-content/dark-mode/android-9-dark-mode.jpg',
alt: 'Android 9.0 Dark Mode Setting'
}
];
const CoolLightbox = () => {
const [currentImageIndex, setCurrentIndex] = useState(0);
const gotoPrevious = () =>
currentImageIndex > 0 && setCurrentIndex(currentImageIndex - 1);
const gotoNext = () =>
currentImageIndex + 1 < images.length &&
setCurrentIndex(currentImageIndex + 1);
return (
<Lightbox
isOpen={true}
onPrev={gotoPrevious}
onNext={gotoNext}
images={images}
currentIndex={currentImageIndex}
/* Add your own UI */
// renderHeader={() => (<CustomHeader />)}
// renderFooter={() => (<CustomFooter />)}
// renderPrevButton={() => (<CustomLeftArrowButton />)}
// renderNextButton={() => (<CustomRightArrowButton />)}
/* Add styling */
// className="cool-class"
// style={{ background: "grey" }}
/* Handle closing */
// onClose={handleClose}
/* react-spring config for open/close animation */
// pageTransitionConfig={{
// from: { transform: "scale(0.75)", opacity: 0 },
// enter: { transform: "scale(1)", opacity: 1 },
// leave: { transform: "scale(0.75)", opacity: 0 },
// config: { mass: 1, tension: 320, friction: 32 }
// }}
/>
);
};
export default CoolLightbox;
Prop | Description |
---|---|
isOpen | Flag that dictates if the lightbox is open or closed |
onClose | Function that closes the Lightbox |
onPrev | Function that changes currentIndex to previous image in images |
onNext | Function that changes currentIndex to next image in images |
currentIndex | Index of image in images array that is currently shown |
renderHeader | A React component that renders above the image pager |
renderFooter | A React component that renders below the image pager |
renderPrevButton | A React component that is used for previous button in image pager |
renderNextButton | A React component that is used for next button in image pager |
images | Array of image objects to be shown in Lightbox |
className | Classes are applied to the root lightbox component |
style | Inline styles are applied to the root lightbox component |
pageTransitionConfig | React-Spring useTransition config for page open/close animation |
Clone the repo
git clone https://github.com/tim-soft/react-spring-lightbox.git react-spring-lightbox
cd react-spring-lightbox
Setup symlinks
yarn link
cd example
yarn link react-spring-lightbox
Run the library in development mode
yarn start
Run the example app in development mode
cd example
yarn start
Changes to the library code should hot reload in the demo app
MIT © Tim Ellenberger
FAQs
A flexible image gallery lightbox with native-feeling touch gestures and buttery smooth animations, built with react-spring.
We found that react-spring-lightbox 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
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.