{"id":13511352,"url":"https://github.com/kof/react-nano-state","last_synced_at":"2025-03-17T06:31:58.516Z","repository":{"id":57334968,"uuid":"264273794","full_name":"kof/react-nano-state","owner":"kof","description":"Fast state that can be shared across components outside of the React tree.","archived":false,"fork":false,"pushed_at":"2022-03-31T22:29:29.000Z","size":30,"stargazers_count":72,"open_issues_count":0,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-27T19:25:12.030Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/github/kof/react-nano-state/tree/master/examples/basic","language":"JavaScript","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/kof.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-15T18:51:17.000Z","updated_at":"2024-11-11T17:11:55.000Z","dependencies_parsed_at":"2022-09-05T10:21:40.209Z","dependency_job_id":null,"html_url":"https://github.com/kof/react-nano-state","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kof%2Freact-nano-state","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kof%2Freact-nano-state/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kof%2Freact-nano-state/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kof%2Freact-nano-state/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kof","download_url":"https://codeload.github.com/kof/react-nano-state/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243847061,"owners_count":20357317,"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":"2024-08-01T03:00:48.085Z","updated_at":"2025-03-17T06:31:57.753Z","avatar_url":"https://github.com/kof.png","language":"JavaScript","funding_links":[],"categories":["react","others","List"],"sub_categories":[],"readme":"# Nano State - sharable state for React\n\nFast state that can be shared across components outside of the React tree.\n\nFast updates are achieved by letting React reconcile only specific components where you use the value.\n\nInspired by the idea from [Recoil](https://recoiljs.org/) - state subscriptions (atoms) minus all the rest. Just a state value one can share and have components hook into it without updating the entire subtree.\n\n## Examples\n\n```js\nimport { createValueContainer, useValue } from \"react-nano-state\";\n\n// Value container can be exported and reused in any part of the tree.\nconst searchContainer = createValueContainer(\"Type the search\");\n\nconst SearchInput = () =\u003e {\n  // All we need to subscribe to those sharable value changes.\n  const [search, setSearch] = useValue(searchContainer);\n  const onChange = (event) =\u003e {\n    setSearch(event.target.value);\n  };\n  return \u003cinput onChange={onChange} value={value} /\u003e;\n};\n```\n\n[Basic example on codesandbox ](https://codesandbox.io/s/github/kof/react-nano-state/tree/master/examples/basic)\n\n## API\n\n### Value container\n\nA value container is an object that can be shared across the code base and used to subscribe to the value.\n\n```js\n// nano-containers.js\nimport { createValueContainer } from \"react-nano-state\";\nexport const searchContainer = createValueContainer(initialValue);\n```\n\n### Hook into the value\n\nIt is very similar to React's `useState` with the difference that you access a shared state.\n\n```js\nimport { useValue } from \"react-nano-state\";\nimport { searchContainer } from \"./nano-containers\";\n\nconst SearchInput = () =\u003e {\n  const [search, setSearch] = useValue(searchContainer);\n  const onChange = (event) =\u003e {\n    setSearch(event.target.value);\n  };\n  return \u003cinput onChange={onChange} value={search} /\u003e;\n};\n```\n\n### Update value outside of component\n\nYou can update the value outside of React components and components using it will receive the update.\n\n```js\nimport { searchContainer } from \"./nano-containers\";\nsearchContainer.dispatch(newSearch);\n```\n\n### Subscribe value outside of component\n\nYou can subscribe to the value outside of React components.\n\n```js\nimport { searchContainer } from \"./nano-containers\";\nsearchContainer.subscribe(console.log);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkof%2Freact-nano-state","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkof%2Freact-nano-state","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkof%2Freact-nano-state/lists"}