Disclosure

WAAPI animated disclosure component consisting of a root, details, summary, and content. Disclosure.Root takes an animationOptions prop, which is an OptionalEffectTiming object. See MDN for more information.

The Disclosure.Details optionally returns a render prop with an isOpen boolean. This can be used to conditionally render the Disclosure.Summary and Disclosure.Content.

All components, includeing Disclosure.Summary and Disclosure.Content, have an optional className prop.

Installation

npm install @madeinhaus/disclosure

yarn add @madeinhaus/disclosure

pnpm add @madeinhaus/disclosure

Import

import Disclosure from '@madeinhaus/disclosure';
import '@madeinhaus/disclosure/dist/index.css';

Usage

Disclosure.Root

The Disclosure.Root component is used as a container for one or more Disclosure.Details components. It accepts the following props:

• className: An optional string that can be used to add custom styles to the Disclosure.Root container.
• animationOptions: An object that specifies the duration and easing function of the animation that occurs when the Disclosure.Details component is expanded or collapsed.

Disclosure.Details

The Disclosure.Details component is used to wrap the content that will be revealed or hidden. It accepts the following props:

• className: An optional string that can be used to add custom styles to the Disclosure.Details container.
• animationOptions: An object that specifies the duration and easing function of the animation that occurs when the Disclosure.Details component is expanded or collapsed.
• defaultOpen: An optional boolean that determines whether the Disclosure.Details component is initially expanded or collapsed.
• children: A function or a ReactNode that is revealed or hidden when the Disclosure trigger is clicked. If a function is passed, it receives an object with the isOpen property, which is a boolean that indicates whether the Disclosure.Details component is currently expanded or collapsed.

Disclosure.Summary

The Disclosure.Summary component is used to create the trigger that reveals or hides the Disclosure.Details component. It accepts the following props:

• className: An optional string that can be used to add custom styles to the Disclosure.Summary trigger.

Disclosure.Content

The Disclosure.Content component is used to create the trigger that reveals or hides the Disclosure.Details component. It accepts the following props:

• className: An optional string that can be used to add custom styles to the Disclosure.Summary trigger.

Examples

Basic Usage

import Disclosure from '@madeinhaus/disclosure';
import '@madeinhaus/disclosure/dist/index.css';
 
const DisclosureDemoBasic: React.FC = ({
  items,
}: {
  items: { heading: string; paragraph: string }[];
}) => {
  return (
    <Disclosure.Root>
      {items.map(({ heading, paragraph }, index) => (
        <Disclosure.Details key={index}>
          <Disclosure.Summary>{heading}</Disclosure.Summary>
          <Disclosure.Content>{paragraph}</Disclosure.Content>
        </Disclosure.Details>
      ))}
    </Disclosure.Root>
  );
};
 
export default DisclosureDemoBasic;

Usage With Render Prop

import Disclosure from '@madeinhaus/disclosure';
import '@madeinhaus/disclosure/dist/index.css';
 
const DisclosureDemoRenderProp: React.FC = ({
  items,
}: {
  items: { heading: string; paragraph: string }[];
}) => {
  return (
    <Disclosure.Root>
      {items.map(({ heading, paragraph }, index) => (
        <Disclosure.Details key={index}>
          {({ isOpen }) => (
            <>
              <Disclosure.Summary>
                {`${heading} - ${isOpen ? 'open' : 'closed'}`}
              </Disclosure.Summary>
              {isOpen && <Disclosure.Content>{paragraph}</Disclosure.Content>}
            </>
          )}
        </Disclosure.Details>
      ))}
    </Disclosure.Root>
  );
};
 
export default DisclosureDemoRenderProp;

Usage With Styles & defaultOpen

import Disclosure from '@madeinhaus/disclosure';
import '@madeinhaus/disclosure/dist/index.css';
import styles from './DisclosureDemo.module.css';
 
const DisclosureDemoWithStyles: React.FC = ({
  items,
}: {
  items: { heading: string; paragraph: string }[];
}) => {
  return (
    <Disclosure.Root className={styles.root}>
      {items.map(({ heading, paragraph }, index) => (
        <Disclosure.Details key={index} defaultOpen={index === 2}>
          <Disclosure.Summary className={styles.summary}>{heading}</Disclosure.Summary>
          <Disclosure.Content className={styles.content}>{paragraph}</Disclosure.Content>
        </Disclosure.Details>
      ))}
    </Disclosure.Root>
  );
};
 
export default DisclosureDemoWithStyles;