https://github.com/kodingdotninja/use-toggle
Toggle custom hook and component wrapper for React 🔦
https://github.com/kodingdotninja/use-toggle
react use-toggle
Last synced: 2 months ago
JSON representation
Toggle custom hook and component wrapper for React 🔦
- Host: GitHub
- URL: https://github.com/kodingdotninja/use-toggle
- Owner: kodingdotninja
- License: mit
- Created: 2021-11-08T16:20:34.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-18T12:51:19.000Z (about 1 year ago)
- Last Synced: 2024-09-20T10:17:34.871Z (9 months ago)
- Topics: react, use-toggle
- Language: TypeScript
- Homepage: https://kodingdotninja.github.io/use-toggle/
- Size: 77.1 KB
- Stars: 6
- Watchers: 2
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# use-toggle
Toggle custom hook and component wrapper for React 🔦
---
**Table of contents**
- [Installing](#installing)
- [Example usage](#example-usage)
- [Toggle hook - `useToggle()`](#toggle-hook---usetoggle)
- [Toggle wrapper - ``](#toggle-wrapper---togglewrap-)
- [``](#clientonly-)
- [API](#api)
- [Maintainers](#maintainers)
- [License](#license)
---
## Installing
```sh
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.
```jsx
import { useToggle } from "@kodingdotninja/use-toggle";
function App() {
const { state, disable, enable, set, toggle } = useToggle();
return (
State: {state ? "enabled" : "disabled"}
toggle
toggle
set(true)}>set true
toggle
);
}
```
### Toggle wrapper - ``
Component which wraps the children with its internal hooks. Use this if you do not want to declare another component and just wrap it.
```jsx
import { ToggleWrap } from "@kodingdotninja/use-toggle";
function App() {
return (
{({ state, disable, enable, set, toggle }) => (
State: {state ? "enabled" : "disabled"}
toggle
toggle
set(true)}>set true
toggle
)}
);
}
```
### ``
Same as ``, usually used on client-side only components.
```jsx
import { ClientOnly } from "@kodingdotninja/use-toggle";
function App() {
return (
...
);
}
```
## API
Read the full API documentation on .
## Maintainers
- Griko Nibras ([@grikomsn](https://github.com/grikomsn))
## License
[MIT License, Copyright (c) 2024 Koding Ninja](./LICENSE)