UICapsule


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

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

Can be used together with components using controlled state

Usage

import { useToggle } from "@uicapsule/components";

useToggle returns methods to activate and deactivate elements in your code and their current value. One of the examples where it works can be 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

Contents

Usage
Arguments and return value