How to use the @react-spring/web.useSprings function in @react-spring/web
To help you get started, we’ve selected a few @react-spring/web examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
tim-soft / react-spring-lightbox / src / components / ImageStage / components / ImagePager / index.js View on Github 
const [disableDrag, setDisableDrag] = useState(false);
// Generate page positions based on current index
const getPagePositions = (i, down = false, xDelta = 0) => {
const x = (i - currentIndex) * pageWidth + (down ? xDelta : 0);
if (i < currentIndex - 1 || i > currentIndex + 1)
return { x, display: 'none' };
return { x, display: 'block' };
};
/**
* Animates translateX of all images at the same time
*
* https://www.react-spring.io/docs/hooks/use-springs
*/
const [props, set] = useSprings(images.length, getPagePositions);
// Animate page change if currentIndex changes
useEffect(() => {
// No need to set page position for initial render
if (firstRender.current) {
firstRender.current = false;
return;
}
// Update page positions after prev/next page state change
set(getPagePositions);
});
/**
* Update each Image's visibility and translateX offset during dragging
*
