{"id":19233409,"url":"https://github.com/grikomsn/use-toggle","last_synced_at":"2026-01-19T17:05:04.852Z","repository":{"id":46029046,"uuid":"425909772","full_name":"kodingdotninja/use-toggle","owner":"kodingdotninja","description":"Toggle custom hook and component wrapper for React 🔦","archived":false,"fork":false,"pushed_at":"2024-04-18T12:51:19.000Z","size":79,"stargazers_count":6,"open_issues_count":1,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-09-20T10:17:34.871Z","etag":null,"topics":["react","use-toggle"],"latest_commit_sha":null,"homepage":"https://kodingdotninja.github.io/use-toggle/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kodingdotninja.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-11-08T16:20:34.000Z","updated_at":"2024-04-18T12:49:04.000Z","dependencies_parsed_at":"2022-07-26T07:47:13.266Z","dependency_job_id":null,"html_url":"https://github.com/kodingdotninja/use-toggle","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kodingdotninja%2Fuse-toggle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kodingdotninja%2Fuse-toggle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kodingdotninja%2Fuse-toggle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kodingdotninja%2Fuse-toggle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kodingdotninja","download_url":"https://codeload.github.com/kodingdotninja/use-toggle/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223849338,"owners_count":17213640,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","use-toggle"],"created_at":"2024-11-09T16:10:28.075Z","updated_at":"2026-01-19T17:05:04.804Z","avatar_url":"https://github.com/kodingdotninja.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- markdownlint-disable MD033 MD036 MD041 --\u003e\n\n# use-toggle\n\n![npm](https://badgen.net/npm/v/@kodingdotninja/use-toggle)\n![packagephobia/install](https://badgen.net/packagephobia/install/@kodingdotninja/use-toggle)\n![packagephobia/publish](https://badgen.net/packagephobia/publish/@kodingdotninja/use-toggle)\n\nToggle custom hook and component wrapper for React 🔦\n\n---\n\n**Table of contents**\n\n- [Installing](#installing)\n- [Example usage](#example-usage)\n  - [Toggle hook - `useToggle()`](#toggle-hook---usetoggle)\n  - [Toggle wrapper - `\u003cToggleWrap /\u003e`](#toggle-wrapper---togglewrap-)\n  - [`\u003cClientOnly /\u003e`](#clientonly-)\n- [API](#api)\n- [Maintainers](#maintainers)\n- [License](#license)\n\n---\n\n## Installing\n\n```sh\npnpm install @kodingdotninja/use-toggle\n```\n\n## Example usage\n\n### Toggle hook - `useToggle()`\n\nUse it as your usual hooks. `disable`, `enable`, or `toggle` does not accept parameters so you can use it on `onClick` handlers.\n\n```jsx\nimport { useToggle } from \"@kodingdotninja/use-toggle\";\n\nfunction App() {\n  const { state, disable, enable, set, toggle } = useToggle();\n  return (\n    \u003cdiv\u003e\n      \u003cspan\u003eState: {state ? \"enabled\" : \"disabled\"}\u003c/span\u003e\n      \u003cbutton onClick={disable}\u003etoggle\u003c/button\u003e\n      \u003cbutton onClick={enable}\u003etoggle\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e set(true)}\u003eset true\u003c/button\u003e\n      \u003cbutton onClick={toggle}\u003etoggle\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Toggle wrapper - `\u003cToggleWrap /\u003e`\n\nComponent which wraps the children with its internal hooks. Use this if you do not want to declare another component and just wrap it.\n\n```jsx\nimport { ToggleWrap } from \"@kodingdotninja/use-toggle\";\n\nfunction App() {\n  return (\n    \u003cToggleWrap\u003e\n      {({ state, disable, enable, set, toggle }) =\u003e (\n        \u003cdiv\u003e\n          \u003cspan\u003eState: {state ? \"enabled\" : \"disabled\"}\u003c/span\u003e\n          \u003cbutton onClick={disable}\u003etoggle\u003c/button\u003e\n          \u003cbutton onClick={enable}\u003etoggle\u003c/button\u003e\n          \u003cbutton onClick={() =\u003e set(true)}\u003eset true\u003c/button\u003e\n          \u003cbutton onClick={toggle}\u003etoggle\u003c/button\u003e\n        \u003c/div\u003e\n      )}\n    \u003c/ToggleWrap\u003e\n  );\n}\n```\n\n### `\u003cClientOnly /\u003e`\n\nSame as `\u003cToggleWrap enableOnMount initialState={false} /\u003e`, usually used on client-side only components.\n\n```jsx\nimport { ClientOnly } from \"@kodingdotninja/use-toggle\";\n\nfunction App() {\n  return (\n    \u003cClientOnly\u003e\n      \u003cdiv\u003e...\u003c/div\u003e\n    \u003c/ClientOnly\u003e\n  );\n}\n```\n\n## API\n\nRead the full API documentation on \u003chttps://kodingdotninja.github.io/use-toggle/\u003e.\n\n## Maintainers\n\n- Griko Nibras ([@grikomsn](https://github.com/grikomsn))\n\n## License\n\n[MIT License, Copyright (c) 2024 Koding Ninja](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrikomsn%2Fuse-toggle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgrikomsn%2Fuse-toggle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrikomsn%2Fuse-toggle/lists"}