use-disclosable
Documentation
Documentation

use-disclosable

The use-disclosable hook is the way to interact with the disclosable system.

API

open

Allow to open a disclosable.

Parameters

  • disclosable: The disclosable component to open or the disclosable identifier.
  • options: An object containing the options for the disclosable.
    • options.props: An object containing the props to pass to the disclosable.
    • options.identifier: An optional identifier for the disclosable. If not provided, the disclosable will be opened using the component name (usally used to display to component of the same type)
    • options.replace: An optional boolean indicating if the disclosable should be replaced if it's already opened. (default false)

Usage

MyComponent.tsx
1import { useDisclosable } from 'use-disclosable';
2import DisclosableComponent from './DisclosableComponent';
3const Component: React.FC = () => {
4  const { open } = useDisclosable();
5
6  return (
7    <button onClick={() => open(DisclosableComponent, { props: { text: 'Hello' } })}>
8      Open disclosable
9    </button>
10  );
11};

close

Allow to close an opened disclosable.

Parameters

  • disclosable: The disclosable component to close or the disclosable identifier.
  • options: An object containing the options for the disclosable.
    • options.destroyAfter: An optional number indicating the delay in milliseconds before destroying the disclosable. (useful for animations)

Usage

MyComponent.tsx
1import { useDisclosable } from 'use-disclosable';
2import DisclosableComponent from './DisclosableComponent';
3const Component: React.FC = () => {
4  const { open, close } = useDisclosable();
5
6  return (
7    <>
8      <button onClick={() => open(DisclosableComponent, { props: { text: 'Hello' } })}>
9        Open disclosable
10      </button>
11      <button onClick={() => close(DisclosableComponent)}>
12        Close disclosable
13      </button>
14    </>
15  );
16};

closeAll

Allow to close all opened disclosables.

Parameters

  • options: An object containing the options for the disclosable.
    • options.destroyAfter: An optional number indicating the delay in milliseconds before destroying the disclosable. (useful for animations)

Usage

MyComponent.tsx
1import { useDisclosable } from 'use-disclosable';
2import DisclosableComponent from './DisclosableComponent';
3const Component: React.FC = () => {
4  const { open, closeAll } = useDisclosable();
5
6  return (
7    <>
8      <button onClick={() => open(DisclosableComponent, { props: { text: 'Hello' } })}>
9        Open disclosable
10      </button>
11      <button onClick={() => closeAll()}>
12        Close all disclosables
13      </button>
14    </>
15  );
16};

setProps

Allow to set props on an opened disclosable.

Parameters

  • disclosable: The disclosable component to set props on or the disclosable identifier.
  • props: An object containing the props to set on the disclosable.

Usage

MyComponent.tsx
1import { useDisclosable } from 'use-disclosable';
2import DisclosableComponent from './DisclosableComponent';
3const Component: React.FC = () => {
4  const { open, setProps } = useDisclosable();
5
6  return (
7    <>
8      <button onClick={() => open(DisclosableComponent, { props: { text: 'Hello' } })}>
9        Open disclosable
10      </button>
11      <button onClick={() => setProps(DisclosableComponent, { text: 'World' })}>
12        Set props on disclosable
13      </button>
14    </>
15  );
16};

disclosables

An object containing all the opened disclosables.

Usage

MyComponent.tsx
1import { useDisclosable } from 'use-disclosable';
2import DisclosableComponent from './DisclosableComponent';
3const App: React.FC = () => {
4  const { open, disclosables } = useDisclosable();
5
6  return (
7    <>
8      <button onClick={() => open(DisclosableComponent, { props: { text: 'Hello' } })}>
9        Open disclosable
10      </button>
11      <button onClick={() => console.log(disclosables)}>
12        Log disclosables
13      </button>
14    </>
15  );
16};