v0.5.0

What's Changed

• Support infinite carousels by @richardscarrott in #27
• Add hasPrevPage and hasNextPage booleans by @jasongerbes in #29

New Contributors

• @jasongerbes made their first contribution in #29

Full Changelog: v0.4.1...v0.5.0

v0.5.0-next.1

What's Changed

• Add hasPrevPage and hasNextPage booleans by @jasongerbes in #29

New Contributors

• @jasongerbes made their first contribution in #29

Full Changelog: v0.5.0-next.0...v0.5.0-next.1

v0.5.0-next.0

What's Changed

• Support infinite carousels by @richardscarrott in #27

Full Changelog: v0.4.1...v0.5.0-next.0

v0.4.1

What's Changed

• Prevent iOS <= 14 from blowing up when reading scroll margin or padding by @richardscarrott in #26

Full Changelog: v0.4.0...v0.4.1

v0.4.1-next.0

What's Changed?

• Prevent iOS <= 14 from blowing up when reading scroll margin or padding.

Full Changelog: v0.4.0...v0.4.1-next.0

v0.4.0

What's Changed

• Add npm downloads badge to README by @richardscarrott in #14
• feat: add scroll behavior config for navigation by @pantajoe in #23
• Add scroll behaviour story by @richardscarrott in #24

New Contributors

• @pantajoe made their first contribution in #23

Full Changelog: v0.3.2...v0.4.0

v0.3.2

What's Changed

• Prevent useLayoutEffect from warning during SSR

v0.3.1

What's Changed

• Add options.initialPages to allow SSR to render pages when known up front (e.g. there is only 1 item per page).

v0.3.0

What's Changed

• Add support for scroll padding & scroll margin #3

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>
      );
    };