How to use @react-spring/web - 6 common examples
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 / Image / index.js View on Github 
scale: pinchScale,
translateX: newTranslateX,
translateY: newTranslateY,
pinching: true
});
},
ref: imageRef,
latency: 250
});
return (
`translate(${x}px, ${y}px) scale(${s})`
),
width: 'auto',
maxHeight: '100%',
maxWidth: '100%',
...(isCurrentImage && { willChange: 'transform' })
}}
src={src}
alt={alt}
draggable="false"
onDragStart={e => {
// Disable image ghost dragging in firefox
e.preventDefault();
}}
onClick={e => {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
*const defaultImageTransform = () => ({
scale: 1,
translateX: 0,
translateY: 0,
config: { ...config.default, precision: 0.01 }
});const PageContainer = ({
children,
isOpen,
className,
style,
pageTransitionConfig
}) => {
const defaultTransition = {
from: { transform: 'scale(0.75)', opacity: 0 },
enter: { transform: 'scale(1)', opacity: 1 },
leave: { transform: 'scale(0.75)', opacity: 0 },
config: { ...config.default, mass: 1, tension: 320, friction: 32 }
};
const transitions = useTransition(
isOpen,
null,
merge(defaultTransition, pageTransitionConfig)
);
return transitions.map(
({ item, key, props }) =>
item && (const PageContainer = ({
children,
isOpen,
className,
style,
pageTransitionConfig
}) => {
const defaultTransition = {
from: { transform: 'scale(0.75)', opacity: 0 },
enter: { transform: 'scale(1)', opacity: 1 },
leave: { transform: 'scale(0.75)', opacity: 0 },
config: { ...config.default, mass: 1, tension: 320, friction: 32 }
};
const transitions = useTransition(
isOpen,
null,
merge(defaultTransition, pageTransitionConfig)
);
return transitions.map(
({ item, key, props }) =>
item && (const ArrowButton = ({ position, onClick, disabled }) => {
const transitions = useTransition(!disabled, null, {
from: { opacity: 0 },
enter: { opacity: 1 },
leave: { opacity: 0 }
});
return transitions.map(
({ item, key, props }) =>
item && (
<button type="button"></button>
