{"id":24698439,"url":"https://github.com/zero-dependency/react","last_synced_at":"2025-10-09T06:30:53.517Z","repository":{"id":153045010,"uuid":"623313651","full_name":"zero-dependency/react","owner":"zero-dependency","description":"⚛️ React hooks, utilities","archived":false,"fork":false,"pushed_at":"2024-03-30T11:41:18.000Z","size":120,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-03-31T08:29:32.470Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/zero-dependency.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-04-04T06:00:18.000Z","updated_at":"2024-03-31T08:29:32.471Z","dependencies_parsed_at":null,"dependency_job_id":"aed6ca90-370d-471f-979f-62dc3ba80af3","html_url":"https://github.com/zero-dependency/react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"zero-dependency/template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zero-dependency%2Freact","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zero-dependency%2Freact/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zero-dependency%2Freact/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zero-dependency%2Freact/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zero-dependency","download_url":"https://codeload.github.com/zero-dependency/react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235797493,"owners_count":19046447,"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":[],"created_at":"2025-01-27T04:18:34.931Z","updated_at":"2025-10-09T06:30:48.164Z","avatar_url":"https://github.com/zero-dependency.png","language":"TypeScript","readme":"# @zero-dependency/react\n\n[![npm version](https://img.shields.io/npm/v/@zero-dependency/react)](https://npm.im/@zero-dependency/react)\n[![npm bundle size (scoped)](https://img.shields.io/bundlephobia/minzip/@zero-dependency/react)](https://bundlephobia.com/package/@zero-dependency/react@latest)\n![npm license](https://img.shields.io/npm/l/@zero-dependency/react)\n\n## Installation\n\n```sh\nnpm install @zero-dependency/react\n```\n\n```sh\nyarn add @zero-dependency/react\n```\n\n```sh\npnpm add @zero-dependency/react\n```\n\n## Usage\n\n```tsx\nimport {\n  namedLazy,\n  useLocalStorage,\n  useSessionStorage,\n  useCookie,\n  ProviderTree,\n  createProvider\n} from '@zero-dependency/react'\n\n// React.lazy\nconst LazyComponent = namedLazy(() =\u003e import('./LazyComponent'), 'LazyComponent')\n\n// localStorage/sessionStorage\ninterface User {\n  name: string\n}\n\nfunction App() {\n  const [users, { setUsers, resetUsers }] = useLocalStorage\u003cUser[]\u003e('users', [])\n\n  function addUser(user: User) {\n    setUsers((prevState) =\u003e [...prevState, user])\n  }\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={() =\u003e addUser({ name: 'John Doe' })}\u003eAdd\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e resetUsers()}\u003eReset\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n\n// cookie\ninterface Cookie {\n  theme: 'dark' | 'light'\n}\n\nfunction App() {\n  const [cookies, { setCookie, removeCookie }] = useCookie\u003cCookie\u003e({\n    initialValue: {\n      theme: 'dark'\n    },\n    attributes: {\n      maxAge: 60 * 60 * 24 * 7 // 1 week\n    }\n  })\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003e{cookies.theme}\u003c/h1\u003e\n      \u003cbutton onClick={() =\u003e setCookie('theme', 'dark')}\u003eDark\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e setCookie('theme', 'light')}\u003eLight\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e removeCookie('theme')}\u003eRemove\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n\n// ProviderTree edge case\nimport { StrictMode } from 'react'\nimport { SWRConfig } from 'swr'\nimport { createRoot } from 'react-dom/client'\nimport App from './App'\nimport Layout from './Layout'\nimport Router from './Router'\n\nconst root = document.querySelector\u003cHTMLElement\u003e('#root')!\n\n// this is a helper function to create a tree of components\ncreateRoot(root).render(\n  \u003cProviderTree\n    providers={(wrapper) =\u003e [\n      wrapper(StrictMode),\n      wrapper(SWRConfig, {\n        value: {\n          refreshInterval: 3000,\n          fetcher: (resource, init) =\u003e\n            fetch(resource, init).then((res) =\u003e res.json())\n        }\n      }),\n      wrapper(Router),\n      wrapper(Layout)\n    ]}\n  \u003e\n    \u003cApp /\u003e\n  \u003c/ProviderTree\u003e\n)\n\n// instead of\ncreateRoot(root).render(\n  \u003cStrictMode\u003e\n    \u003cSWRConfig\n      value={{\n        refreshInterval: 3000,\n        fetcher: (resource, init) =\u003e\n          fetch(resource, init).then(res =\u003e res.json())\n      }}\n    \u003e\n      \u003cRouter\u003e\n        \u003cLayout\u003e\n          \u003cApp /\u003e\n        \u003c/Layout\u003e\n      \u003c/Router\u003e\n    \u003c/SWRConfig\u003e\n  \u003c/StrictMode\u003e\n)\n\n// createProvider\ninterface Counter {\n  count: number\n  setCount: React.Dispatch\u003cReact.SetStateAction\u003cnumber\u003e\u003e\n}\n\nconst [useCounter, CounterProvider] = createProvider\u003cCounter\u003e('Counter')\n\nfunction Counter() {\n  const { count, setCount } = useCounter()\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003e{count}\u003c/h1\u003e\n      \u003cbutton onClick={() =\u003e setCount(count + 1)}\u003e\n        Increment\n      \u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n\nfunction App() {\n  const [count, setCount] = useState(0)\n\n  return (\n    \u003cCounterProvider value={{ count, setCount }}\u003e\n      \u003cCounter /\u003e\n    \u003c/CounterProvider\u003e\n  )\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzero-dependency%2Freact","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzero-dependency%2Freact","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzero-dependency%2Freact/lists"}