useDisclosure

The useDisclosure utility gives you controls for a Boolean isOpen value. This can be used to control the visibility of components.

Usage

import { SfButton, useDisclosure } from '@storefront-ui/react';

function Basic() {
  const { isOpen, toggle, open, close } = useDisclosure();

  return (
    <>
      <SfButton onClick={open}>Open</SfButton>
      <SfButton onClick={close}>Close</SfButton>
      <SfButton onClick={toggle}>Toggle</SfButton>
      {isOpen && <p>This text shows when isOpen value is true.</p>}
    </>
  );
}

With Initial Value

By default, the value of isOpen is false. But we can pass an initial value using an option object with an initialValue.

import { SfButton, useDisclosure } from '@storefront-ui/react';

function OpenByDefault() {
  const { isOpen, toggle } = useDisclosure({ 
    initialValue: true
  });

  return (
    <>
      <SfButton onClick={toggle}>Toggle</SfButton>
      {isOpen && <p>This will be open by default!</p>}
    </>
  );
}