useSnapIndicators

Returns indicator state for scroll-snap containers, tracking which item is currently visible.

Usage

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

function Carousel() {
  const ref = useRef<HTMLDivElement>(null);
  const { indicators, activeIndex } = useSnapIndicators(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>
      <div className="pagination-dots">
        {indicators.map((props, index) => (
          <button key={index} {...props}>
            <span className="sr-only">Slide {index + 1}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

With numeric display

Use activeIndex and indicators.length to show position as text:

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

function CarouselWithCounter() {
  const ref = useRef<HTMLDivElement>(null);
  const { activeIndex, indicators } = useSnapIndicators(ref);

  return (
    <div>
      <div ref={ref} className="reel">
        {/* slides */}
      </div>
      <span>
        {activeIndex + 1} / {indicators.length}
      </span>
    </div>
  );
}

Combining with navigation

Pair with useSnapNavigation for prev/next buttons:

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>
      <button {...previousButtonProps}>Previous</button>
      <div className="pagination-dots">
        {indicators.map((props, index) => (
          <button key={index} {...props}>
            <span className="sr-only">Slide {index + 1}</span>
          </button>
        ))}
      </div>
      <button {...nextButtonProps}>Next</button>
    </div>
  );
}

API

useSnapIndicators accepts a ref to the scroll-snap container.

Returns:

• indicators – array of button props with id, aria-current, and onClick
• activeIndex – index of the currently visible item (0-based)