useToggle - Reshaped


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

  return (
    <Button onClick={active ? deactivate : activate}>{active ? "Deactivate" : "Activate"}</Button>
  );
}

Usage

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

Arguments and return value

() => ({
  activate: () => {},
  deactivate: () => {},
  toggle: () => {},
  active: boolean,
});

useTheme