react-simple-observable-store
v1.0.0
Published
Simple React store using observables. Uses `Proxy` and `Reflex` APIs
Downloads
4
Readme
react-simple-observable-store
Simple React store using observables. Uses Proxy
and Reflex
APIs
Installation
npm
$ npm install react-simple-observable-store
compile
- Download or clone this github project
- Run
npm i
in the project folder - Run
npm run build
Usage
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, StoreContext, symbol, useStore } from 'react-simple-observable-store';
const store = createStore({
foo: {
inc: 1,
},
bar: {},
});
store[symbol].register(newState => console.log('state updated', newState))
const Component = () => {
const [ state, setState ] = useStore('foo');
return (
<button onClick={() => setState({ inc: state.inc + 1 })}>Update</button>
);
};
const DisplayComponent = () => {
const [ state ] = useStore('foo');
return (
<span>State : {state.inc}</span>
);
};
const App = () => {
return (
<StoreContext.Provider value={store}>
<Component />
<DisplayComponent />
</StoreContext.Provider>
);
};
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
API
createStore
- constructor(
<Object>
)<Object>
: initialize a new store and returns it
store[symbol]
- register(
<Function>
)<Function>
: programmatically registers a callback - unregister(
<Function>
)undefined
: programmatically unregisters a callback - clear()
undefined
: programmatically clears all callbacks
useStore
hook
- useStore(
<String>
)<Array>
: returns [ state, setState ] on a key of the store
Demo
You can launch demo/index.html to test a simple state update
License
MIT © Olivier Gasc