react-obstate
v0.1.3
Published
React hooks for the generic object state management library
Downloads
939
Maintainers
Readme
React Obstate
React hooks for the generic object state management library
obstate
obstate
is a generic state management library that uses proxies to wrap objects to allow for easy state change notifications. These notifications are used in the hooks provided by this library so that obstate
states can be used in React projects with ease. It's primarily designed to allow for a global state instance to be used both manually and via React components.
Installation
Install by running: npm install react-obstate obstate --save-dev
.
obstate
is a peer dependency of this library.
Usage
In your component simply import the hook you desire and pass a (global) obstate
state instance to it:
import React from "react";
import { createStateObject } from "obstate";
import { useSingleState } from "react-obstate";
const globalState = createStateObject({
test: 100
});
export function ReactComponent(props) {
const [currentValue, setValue] = useSingleState(globalState, "test");
return (
<div>
<p>The current value is: {currentValue}</p>
<button onClick={() => setValue(currentValue + 1)}>Increment</button>
</div>
);
}
The useSingleState
hook allows for reading and updating a single property in an obstate
instance.
You can also work with a full state object just as easily:
import React from "react";
import { createStateObject } from "obstate";
import { useState } from "react-obstate";
const globalState = createStateObject({
test: 100,
on: false
});
export function ReactComponent(props) {
const [state, setPartial /*, setFull */] = useState(globalState);
return (
<div>
<p>The current value is: {state.test}</p>
<p>Power is <strong></strong></p>
<button onClick={() => setPartial({ test: state.test + 1 })}>Increment</button>
<button onClick={() => setPartial({ on: !state.on })}>Toggle</button>
</div>
);
}
The useState
hook allows for reading and updating an entire obstate
instance. The first parameter returned is the full state value at the current point in time (minus the obstate
event emitter interface). The second is a partial-update method and the third is a full-update method.
Partial updates allow for specifying only the properties you wish to update, whereas full updates completely rewrite the state object.