Releases · richardscarrott/react-snap-carousel

02 Feb 16:23

v0.2.0

c3a91bf

v0.2.0

What's Changed

Snap point CSS declarations (scroll-snap-align: start) are no longer applied automatically. This means by default, a carousel will not snap to a page. #6

Instead a Set of item indexes called snapPointIndexes is provided to allow carousels to render snap points themselves. This change was necessary to ensure DOM updates are only performed by React.

Before

const Carousel = () => {
  const { scrollRef } = useSnapCarousel();
  return (
    <ul ref={scrollRef}>
      {Array.from({ length: 16 }).map((item) => (
        <li>{item}</li>
      ))}
    </ul>
  );
};

After

const Carousel = () => {
  const { scrollRef, snapPointIndexes } = useSnapCarousel();
  return (
    <ul ref={scrollRef}>
      {Array.from({ length: 16 }).map((item, i) => (
        <li
          style={{
            scrollSnapAlign: snapPointIndexes.has(i) ? 'start' : ''
          }}
        >
          {item}
        </li>
      ))}
    </ul>
  );
};