useAnimatedDetails

Adds smooth expand/collapse animations to native HTML <details> elements.

Usage

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

function AnimatedDetails() {
  const { ref } = useAnimatedDetails();

  return (
    <details ref={ref}>
      <summary>Click to expand</summary>
      <p>This content will animate open and closed.</p>
    </details>
  );
}

Controlled details

Control the open state externally:

import { useState } from 'react';
import { useAnimatedDetails } from '@volvo-cars/react-headless';

function ControlledDetails() {
  const [open, setOpen] = useState(false);

  const { ref } = useAnimatedDetails({
    open,
    onToggle: setOpen,
  });

  return (
    <div>
      <button onClick={() => setOpen(!open)}>{open ? 'Close' : 'Open'}</button>
      <details ref={ref}>
        <summary>Summary</summary>
        <p>Controlled content</p>
      </details>
    </div>
  );
}

Animation finish callback

React to when the animation completes:

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

function DetailsWithCallback() {
  const { ref } = useAnimatedDetails({
    onAnimationFinish: (open) => {
      console.log('Animation finished, now', open ? 'open' : 'closed');
    },
  });

  return (
    <details ref={ref}>
      <summary>Click me</summary>
      <p>Content here</p>
    </details>
  );
}

Accessibility

The hook respects the user’s prefers-reduced-motion preference. When reduced motion is preferred, the details element will open and close instantly without animation.

API

useAnimatedDetails accepts an optional options object with the following properties:

• ref – optional existing ref to the details element
• open – controlled open state of the details element
• onToggle – callback called when the details element is toggled, receives (open: boolean)
• onAnimationFinish – callback called when the animation completes, receives (open: boolean)

The hook returns an object with:

• ref – ref to spread on the <details> element