react-usecollapsible v1.0.2

React useCollapsible

React hook for easily creating accessible collapsed content.

• Written in TypeScript
• Handles all of the accessibility props, so you can focus on styling
• Flexibility - not tied to any single animation pattern, you control how (or if) it animates.
• Nested collapsible content areas
• Controlled component, gives you state and a setter, and lets you handle the rest.

Installation

npm i react-usecollapsible

Usage

Try it out on CodeSandbox

Basic Usage

import { useCollapsible } from 'react-usecollapsible';

const Collapsible = () => {
  const { triggerProps, contentProps } = useCollapsible();

  return (
    <>
      <button {...triggerProps}>Toggle</button>
      <div {...contentProps}>Collapsible content</div>
    </>
  );
};

Default Expanded

import { useCollapsible } from 'react-usecollapsible';

const Collapsible = () => {
  const { triggerProps, contentProps } = useCollapsible({
    defaultExpanded: true,
  });

  return (
    <>
      <button {...triggerProps}>Toggle</button>
      <div {...contentProps}>Collapsible content</div>
    </>
  );
};

Control Expansion

import { useCollapsible } from 'react-usecollapsible';

const Collapsible = () => {
  const { expanded, setExpanded, triggerProps, contentProps } = useCollapsible();

  return (
    <>
      <button {...triggerProps} onClick={() => setExpanded((e) => !e)}>
        {expanded ? 'Hide' : 'Show'}
      </button>
      <div {...contentProps} style={{ display: expanded ? 'block' : 'none' }}>
        Collapsible content
      </div>
    </>
  );
};

Custom ID attribute

import { useCollapsible } from 'react-usecollapsible';

const Collapsible = () => {
  const { expanded, setExpanded, triggerProps, contentProps } = useCollapsible({
    id: 'my_custom_id',
  });
  // contentProps.id and triggerProps['aria-controls'] will be 'my_custom_id'

  return (
    <>
      <button {...triggerProps}>Toggle</button>
      <div {...contentProps}>Collapsible content</div>
    </>
  );
};

API

Hook Arguments

Hook Response

FAQ

This is likely because you need to style your content based on the expanded state. To give maximum flexibility in how you'd like to animate (or not animate) the expansion, styling is left completely up to you.

This hook controls how accessibility tools see the content, not how it looks visually.

Feel free to use this hook as a dependency on a component package that implements animations if you'd like!