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
import { useToggle } from "reshaped";
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> </> ); }
() => ({ activate: () => {}, deactivate: () => {}, toggle: () => {}, active: boolean, });