@kodingdotninja/use-toggle
v1.0.1
Published
Toggle custom hook and component wrapper for React 🔦
Downloads
39
Readme
use-toggle
Toggle custom hook and component wrapper for React 🔦
Table of contents
Installing
pnpm install @kodingdotninja/use-toggle
Example usage
Toggle hook - useToggle()
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>
);
}
Toggle wrapper - <ToggleWrap />
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>
);
}
<ClientOnly />
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>
);
}
API
Read the full API documentation on https://kodingdotninja.github.io/use-toggle/.
Maintainers
- Griko Nibras (@grikomsn)