native-state-react
v2.0.1
Published
Very lightweight and most efficient implementation for react global state,just using react hooks. Magic !
Downloads
11
Maintainers
Readme
Native Global state for React
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. Magic !
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
First, import
and Add <Root />
as a component in the top level.
then, import
and use useSelector
to get the desired global state slice.
const [name,setState] = useSelector(s=>s.name);
if name
not found in global state, it will return undefined
.
And you can update the name like this..
setState({name:"Will"});
Add/update another state property by
setState({school:{class:"VII"}});
See example
folder for react project example implementation.
Full implementation
Add <Root>
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(
<React.StrictMode>
<Root initial={store} /> // 'initial' prop is optional(default will be empty object).
<App/>
</React.StrictMode>,
document.getElementById('root'),
)
In your component
import { useSelector } from 'native-state-react';
function App() {
const [name,setState] = useSelector(s=>s.name);
return <div>{name}</div>
}
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. the school
object will stay unchanged.
Example with state update.
import { useSelector } from 'native-state-react';
function Class() {
const [name,setState] = useSelector(s=>s.name);
useEffect(()=>{
setTimeout(() => {
setSt({name:"George"});
}, 3000);
},[]);
return <div>{name}</div>
}
With Above code, you can see the name gets updated in UI after 3 seconds.