https://github.com/sarath263/native-state

Native Global state in React: Simple, Lightweight & No dependencies used.
https://github.com/sarath263/native-state

global-state global-state-management native-state no-dependencies react-state react-state-management

Last synced: 20 days ago
JSON representation

Native Global state in React: Simple, Lightweight & No dependencies used.

• Host: GitHub
• URL: https://github.com/sarath263/native-state
• Owner: sarath263
• License: mpl-2.0
• Created: 2024-06-21T15:54:08.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-11-01T09:41:24.000Z (3 months ago)
• Last Synced: 2025-11-01T11:24:18.877Z (3 months ago)
• Topics: global-state, global-state-management, native-state, no-dependencies, react-state, react-state-management
• Language: JavaScript
• Homepage:
• Size: 404 KB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

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)

A native global state implementation with react. At least React version `18.2.0` is required.

Lightweight and most efficient implementation for react global state,just using in built react hooks. Compatible with React Native too. 

>  Component renders only if the slice taken(in example `s.name`) changes.

> 

>  No external dependencies used.

> 

>  Very lightweight (605 bytes in size)

> 

>  Simple usage( **no reducers, no actions and no boilerplate code required** )

>

>  Perfect replacement for Redux and Mobx

#

 

### Install

#### npm i native-state-react

#

### Usage

1. First, `import` and Add `` as a component in the top level. 

2. Then, `import` and use `useSelector` to get the desired global state slice.

   `const [name,setState] = useSelector(s=>s.name);`

3. Note:

   - **If `name` not found in global state, it will return `undefined`.**

   - **Eventhough `name` coming from global state, Note that, setState can still update the global state values, not just the name.**

4. Update the name like this.. 

   `setState({name:"Will"});`

5. Add/update another state property by

   `setState({school:{class:"VII"}});`

#

#### See `example` folder for react project example implementation.

### Full implementation

Add `` in your top component tree (`index.js`), 

    import React from 'react';

    import ReactDOM from 'react-dom';

    //Add import 

    import { Root } from 'native-state-react'; 

    

	let store={ 

	    name:"Mary",

	    school:{class:"V"}

    };

    ReactDOM.render(

     

	   // 'initial' prop is optional(default will be empty object).

	  

     ,

    document.getElementById('root'),

    )

In your component

    import { useSelector } from 'native-state-react';

    function App() {

	    const [name,setState] = useSelector(s=>s.name);

	    return 
{name}

    }

    

Update name in the state like this


    setState({name:"George"});

it 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"}})

Example with state update.

    import { useSelector } from 'native-state-react';

    function Class() {

	    const [name,setState] = useSelector(s=>s.name);

	    useEffect(()=>{

		    setTimeout(() => {

			    setState({name:"George"});

		    }, 3000);

		 },[]);

	    

	    return 
{name}

    }

With Above code, you can see the name gets updated in UI after 3 seconds.