{"id":41387917,"url":"https://github.com/sarath263/native-state","last_synced_at":"2026-01-23T12:05:36.846Z","repository":{"id":247172457,"uuid":"818330856","full_name":"sarath263/native-state","owner":"sarath263","description":"Native Global state in React: Simple, Lightweight \u0026 No dependencies used.","archived":false,"fork":false,"pushed_at":"2025-11-01T09:41:24.000Z","size":414,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-01T11:24:18.877Z","etag":null,"topics":["global-state","global-state-management","native-state","no-dependencies","react-state","react-state-management"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sarath263.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-06-21T15:54:08.000Z","updated_at":"2025-11-01T09:48:30.000Z","dependencies_parsed_at":"2025-01-31T08:24:42.741Z","dependency_job_id":"df631254-e0db-4989-9f9f-3136e90e33cf","html_url":"https://github.com/sarath263/native-state","commit_stats":null,"previous_names":["sarath263/native-state"],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/sarath263/native-state","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sarath263%2Fnative-state","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sarath263%2Fnative-state/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sarath263%2Fnative-state/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sarath263%2Fnative-state/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sarath263","download_url":"https://codeload.github.com/sarath263/native-state/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sarath263%2Fnative-state/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28690613,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-23T11:01:27.039Z","status":"ssl_error","status_checked_at":"2026-01-23T11:00:26.909Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["global-state","global-state-management","native-state","no-dependencies","react-state","react-state-management"],"created_at":"2026-01-23T12:03:33.333Z","updated_at":"2026-01-23T12:05:36.832Z","avatar_url":"https://github.com/sarath263.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Native Global state for React [![Node.js Package](https://github.com/sarath263/native-state/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/sarath263/native-state/actions/workflows/npm-publish.yml)\nA native global state implementation with react. At least React version `18.2.0` is required.\n\nLightweight and most efficient implementation for react global state,just using in built react hooks. Compatible with React Native too. \n\n\u003e  Component renders only if the slice taken(in example `s.name`) changes.\n\u003e \n\u003e  No external dependencies used.\n\u003e \n\u003e  Very lightweight (605 bytes in size)\n\u003e \n\u003e  Simple usage( **no reducers, no actions and no boilerplate code required** )\n\u003e\n\u003e  Perfect replacement for Redux and Mobx\n\n#\n \n### Install\n#### npm i native-state-react\n#\n### Usage\n\n1. First, `import` and Add `\u003cRoot initial={{/* Initial state */}}/\u003e` as a component in the top level. \n\n2. Then, `import` and use `useSelector` to get the desired global state slice.\n\n   `const [name,setState] = useSelector(s=\u003es.name);`\n\n3. Note:\n   - **If `name` not found in global state, it will return `undefined`.**\n   - **Eventhough `name` coming from global state, Note that, setState can still update the global state values, not just the name.**\n4. Update the name like this.. \n\n   `setState({name:\"Will\"});`\n\n5. Add/update another state property by\n\n   `setState({school:{class:\"VII\"}});`\n\n#\n\n#### See `example` folder for react project example implementation.\n\n### Full implementation\n\nAdd `\u003cRoot\u003e` in your top component tree (`index.js`), \n\n    import React from 'react';\n    import ReactDOM from 'react-dom';\n    //Add import \n    import { Root } from 'native-state-react'; \n    \n\tlet store={ \n\t    name:\"Mary\",\n\t    school:{class:\"V\"}\n    };\n    ReactDOM.render(\n     \u003cReact.StrictMode\u003e\n\t  \u003cRoot initial={store} /\u003e // 'initial' prop is optional(default will be empty object).\n\t  \u003cApp/\u003e\n     \u003c/React.StrictMode\u003e,\n    document.getElementById('root'),\n    )\n\nIn your component\n\n    import { useSelector } from 'native-state-react';\n    function App() {\n\t    const [name,setState] = useSelector(s=\u003es.name);\n\t    return \u003cdiv\u003e{name}\u003c/div\u003e\n    }\n    \nUpdate name in the state like this\n\n    setState({name:\"George\"});\n\nit just replaces the given name in the existing state, other state values will stay unchanged. We can use the same setState to update another value in global state setState({school:{class:\"1A\"}})\n\nExample with state update.\n\n    import { useSelector } from 'native-state-react';\n    function Class() {\n\t    const [name,setState] = useSelector(s=\u003es.name);\n\t    useEffect(()=\u003e{\n\t\t    setTimeout(() =\u003e {\n\t\t\t    setState({name:\"George\"});\n\t\t    }, 3000);\n\t\t },[]);\n\t    \n\t    return \u003cdiv\u003e{name}\u003c/div\u003e\n    }\nWith Above code, you can see the name gets updated in UI after 3 seconds.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsarath263%2Fnative-state","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsarath263%2Fnative-state","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsarath263%2Fnative-state/lists"}