Function Viewpager

use-gesture-test/src/App.tsx:15–56

()

]

function Viewpager() {
  const index = useRef(0);
  const width = window.innerWidth;

  const [props, api] = useSprings(pages.length, i => ({
    x: i * width,
    scale: 1
  }));

  const bind = useDrag(({ active, movement: [mx], direction: [xDir], cancel }) => {
    if (active && Math.abs(mx) > width / 2) {
      let newIndex = index.current + (xDir > 0 ? -1 : 1);

      if(newIndex < 0) {
        newIndex = 0;
      }

      if(newIndex > pages.length - 1) {
        newIndex = pages.length - 1;
      }

      index.current =  newIndex;

      cancel()
    }
    api.start(i => {
      const x = (i - index.current) * width + (active ? mx : 0)
      const scale = active ? 1 - Math.abs(mx) / width / 2 : 1
      return { x, scale }
    })
  });

  return (
    <div className='wrapper'>
      {props.map(({ x, scale }, i) => (
        <animated.div className='page' {...bind()} key={i} style={{ x }}>
          <animated.div style={{ scale, backgroundImage: `url(${pages[i]})` }} />
        </animated.div>
      ))}
    </div>
  )
}

export default Viewpager;