Toggle custom hook and component wrapper for React 🔦
Table of contents
# using npm
npm install @kodingdotninja/use-toggle
# using yarn
yarn add @kodingdotninja/use-toggle
Use it as your usual hooks. disable
, enable
, or toggle
does not accept parameters so you can use it on onClick
handlers.
import { useToggle } from "@kodingdotninja/use-toggle";
function App() {
const { state, disable, enable, set, toggle } = useToggle();
return (
<div>
<span>State: {state ? "enabled" : "disabled"}</span>
<button onClick={disable}>toggle</button>
<button onClick={enable}>toggle</button>
<button onClick={() => set(true)}>set true</button>
<button onClick={toggle}>toggle</button>
</div>
);
}
Component which wraps the children with its internal hooks. Use this if you do not want to declare another component and just wrap it.
import { ToggleWrap } from "@kodingdotninja/use-toggle";
function App() {
return (
<ToggleWrap>
{({ state, disable, enable, set, toggle }) => (
<div>
<span>State: {state ? "enabled" : "disabled"}</span>
<button onClick={disable}>toggle</button>
<button onClick={enable}>toggle</button>
<button onClick={() => set(true)}>set true</button>
<button onClick={toggle}>toggle</button>
</div>
)}
</ToggleWrap>
);
}
Same as <ToggleWrap enableOnMount initialState={false} />
, usually used on client-side only components.
import { ClientOnly } from "@kodingdotninja/use-toggle";
function App() {
return (
<ClientOnly>
<div>...</div>
</ClientOnly>
);
}
Read the full API documentation on https://use-toggle-api-docs.koding.ninja.
Head over to our dedicated Discord channel for use-toggle
.
- Griko Nibras (@grikomsn)