react-disclosure

Usage

Uncontrolled mode

import React from 'react';
import {useDisclosure} from 'react-disclosure';

function Spoiler() {
  const disclosure = useDisclosure('id', {initiallyExpanded: true});

  return (
    <>
      <button {...disclosure.ui.getButtonProps()}>
        {disclosure.state.isExpanded ? 'Collapse' : 'Expand'}
      </button>

      <div {...disclosure.ui.getContentProps()}>Hidden content</div>
    </>
  );
}

Controlled mode

import React from 'react';
import {useDisclosureUi} from 'react-disclosure';

function Spoiler() {
  const [isExpanded, setIsExpanded] = React.useState(false);
  const disclosureUi = useDisclosureUi('id', {
    isExpanded,
    toggle: () => setIsExpanded((value) => !value),
  });

  return (
    <>
      <button {...disclosureUi.getButtonProps()}>
        {isExpanded ? 'Collapse' : 'Expand'}
      </button>

      <div {...disclosureUi.getContentProps()}>Hidden content</div>
    </>
  );
}