useToggle

import { useToggle } from "reshaped"

useToggle returns methods for activating and deactivating elements in your code, along with their current value. One example of its use case is in components like Modal.

function Example() {
  const { active, activate, deactivate } = useToggle(false);

  return (
    <>
      <Button onClick={activate}>Open modal</Button>
      <Modal active={active} onClose={deactivate}>
        Modal content
      </Modal>
    </>
  );
}
Modal
Related component
() => {
  // Set state to true
  activate: () => void,

  // Set state to false
  deactivate: () => void,

  // Toggle state to the opposite or the passed value
  toggle: (targetValue?: boolean) => void,

  // Current state value
  active: boolean,
}
Previous
Professionally crafted React & Figma components for building beautiful products or starting your own design system
Built with Reshaped in Amsterdam ❤️
Contact us·
© Reshaped 2025