useSnapNavigation

Returns prev/next button props for scroll-snap containers like carousels and reels.

Usage

import { useRef } from 'react';
import { useSnapNavigation } from '@volvo-cars/react-headless';

function Carousel() {
  const ref = useRef<HTMLDivElement>(null);
  const { previousButtonProps, nextButtonProps } = useSnapNavigation(ref);

  return (
    <div>
      <div ref={ref} className="reel">
        <div className="reel-frame">Slide 1</div>
        <div className="reel-frame">Slide 2</div>
        <div className="reel-frame">Slide 3</div>
      </div>
      <button {...previousButtonProps}>Previous</button>
      <button {...nextButtonProps}>Next</button>
    </div>
  );
}

Button props

The returned props include:

• onClick – scrolls to the previous/next snap point
• disabled – true when at the start/end of the container

const { previousButtonProps, nextButtonProps } = useSnapNavigation(ref);

// previousButtonProps.disabled is true when scrolled to the start
// nextButtonProps.disabled is true when scrolled to the end

Combining with indicators

Pair with useSnapIndicators for a complete carousel:

import { useRef } from 'react';
import {
  useSnapIndicators,
  useSnapNavigation,
} from '@volvo-cars/react-headless';

function FullCarousel() {
  const ref = useRef<HTMLDivElement>(null);
  const { indicators, activeIndex } = useSnapIndicators(ref);
  const { previousButtonProps, nextButtonProps } = useSnapNavigation(ref);

  return (
    <div>
      <div ref={ref} className="reel">
        {/* slides */}
      </div>
      <div className="flex items-center gap-8">
        <button {...previousButtonProps}>←</button>
        <span>
          {activeIndex + 1} / {indicators.length}
        </span>
        <button {...nextButtonProps}>→</button>
      </div>
    </div>
  );
}

API

useSnapNavigation accepts a ref to the scroll-snap container.

Returns:

• previousButtonProps – props to spread on the previous button (onClick, disabled)
• nextButtonProps – props to spread on the next button (onClick, disabled)