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.

github tim-soft / react-spring-lightbox / src / components / ImageStage / components / Image / index.js View on Github external
scale: pinchScale,
        translateX: newTranslateX,
        translateY: newTranslateY,
        pinching: true
      });
    },
    ref: imageRef,
    latency: 250
  });

  return (
    <animated.img
      ref={imageRef}
      className="lightbox-image"
      style={{
        transform: to(
          [scale, translateX, translateY],
          (s, x, y) => `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 => {
github tim-soft / react-spring-lightbox / src / components / ImageStage / components / ImagePager / index.js View on Github external
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
   *
github tim-soft / react-spring-lightbox / src / components / ImageStage / components / Image / index.js View on Github external
const defaultImageTransform = () => ({
    scale: 1,
    translateX: 0,
    translateY: 0,
    config: { ...config.default, precision: 0.01 }
  });
github tim-soft / react-spring-lightbox / src / components / PageContainer / index.js View on Github external
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 && (
        <animated.div
          key={key}
          className={`lightbox-container${className ? ` ${className}` : ''}`}
          style={{
            ...props,
github tim-soft / react-spring-lightbox / src / components / PageContainer / index.js View on Github external
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 && (
        <animated.div
          key={key}
          className={`lightbox-container${className ? ` ${className}` : ''}`}
          style={{
            ...props,
            display: 'flex',
            flexDirection: 'column',
            position: 'fixed',
github tim-soft / react-spring-lightbox / example / components / GalleryLightbox / components / LightboxArrowButton.js View on Github external
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 && (
        <animated.div
          key={key}
          style={{
            ...props,
            zIndex: 999
          }}
        >
          <Button position={position} type="button" onClick={onClick}>

@react-spring/web

`react-dom` support

MIT
Latest version published 2 months ago

Package Health Score

91 / 100
Full package analysis