function Example() { const { active, activate, deactivate } = useToggle(false); return ( <Button onClick={active ? deactivate : activate}>{active ? "Deactivate" : "Activate"}</Button> ); }
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> </> ); }
() => ({ activate: () => {}, deactivate: () => {}, toggle: () => {}, active: boolean, });