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 (opens in a new tab) 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

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

DisclosureDemoBasic.tsx

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;

Voluptate velit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel malesuada velit. Cras vel dolor at magna commodo congue at a sapien. Proin euismod enim ut sem viverra, at malesuada est tincidunt. Integer euismod justo eu dolor bibendum, vel fringilla ligula posuere.

Vel fringilla

Aliquam erat volutpat. Sed malesuada, diam a faucibus blandit, risus metus sollicitudin erat, id suscipit libero lectus eu leo. Aliquam erat volutpat.

Enim lobortis

Nam congue euismod urna vel luctus. Sed vitae velit a nulla tempor viverra. Integer aliquam dolor vel ligula commodo laoreet. Integer in risus at risus bibendum aliquet. Aliquam erat volutpat. Proin faucibus varius enim, a ullamcorper nisi blandit at. Curabitur ac tortor et nulla blandit porttitor a eget libero. Nullam viverra malesuada magna non bibendum.

Metus vulputate

Suspendisse potenti. Praesent faucibus blandit enim, a condimentum nisi rutrum id. Donec congue elit vel turpis suscipit, eget placerat dui feugiat

Mauris augue

Vivamus luctus velit quis magna congue, a faucibus nisl tincidunt. Sed auctor orci vel enim blandit, eu consectetur elit viverra. Aliquam erat volutpat. Sed quis sem vel massa scelerisque suscipit. Proin euismod, dolor id molestie sollicitudin, nulla turpis placerat leo, non convallis ligula nulla non mi. Curabitur vitae tellus id orci congue tempor. Nullam euismod egestas nibh, vel scelerisque libero aliquet vel.

Usage With Render Prop

DisclosureDemoRenderProp.tsx

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;

Voluptate velit - closed

Vel fringilla - closed

Aliquam erat volutpat. Sed malesuada, diam a faucibus blandit, risus metus sollicitudin erat, id suscipit libero lectus eu leo. Aliquam erat volutpat.

Enim lobortis - closed

Metus vulputate - closed

Suspendisse potenti. Praesent faucibus blandit enim, a condimentum nisi rutrum id. Donec congue elit vel turpis suscipit, eget placerat dui feugiat

Mauris augue - closed

Usage With Styles

DisclosureDemoWithStyles.tsx

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}>
          <Disclosure.Summary className={styles.summary}>{heading}</Disclosure.Summary>
          <Disclosure.Content className={styles.content}>{paragraph}</Disclosure.Content>
        </Disclosure.Details>
      ))}
    </Disclosure.Root>
  );
};
 
export default DisclosureDemoWithStyles;

Voluptate velit

Vel fringilla

Aliquam erat volutpat. Sed malesuada, diam a faucibus blandit, risus metus sollicitudin erat, id suscipit libero lectus eu leo. Aliquam erat volutpat.

Enim lobortis

Metus vulputate

Suspendisse potenti. Praesent faucibus blandit enim, a condimentum nisi rutrum id. Donec congue elit vel turpis suscipit, eget placerat dui feugiat

Mauris augue

Usage as Controlled Accordion

DisclosureDemoControlled.tsx

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

Voluptate velit

Vel fringilla

Aliquam erat volutpat. Sed malesuada, diam a faucibus blandit, risus metus sollicitudin erat, id suscipit libero lectus eu leo. Aliquam erat volutpat.

Enim lobortis

Metus vulputate

Suspendisse potenti. Praesent faucibus blandit enim, a condimentum nisi rutrum id. Donec congue elit vel turpis suscipit, eget placerat dui feugiat

Mauris augue

Usage as Controlled Accordion with isOpen

DisclosureDemoControlled.tsx

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

Voluptate velit:

Vel fringilla:

Aliquam erat volutpat. Sed malesuada, diam a faucibus blandit, risus metus sollicitudin erat, id suscipit libero lectus eu leo. Aliquam erat volutpat.

Enim lobortis: isOpen

Metus vulputate:

Suspendisse potenti. Praesent faucibus blandit enim, a condimentum nisi rutrum id. Donec congue elit vel turpis suscipit, eget placerat dui feugiat

Mauris augue: