https://github.com/perry-mitchell/react-obstate
React hooks for the generic object state management library
https://github.com/perry-mitchell/react-obstate
Last synced: 18 days ago
JSON representation
React hooks for the generic object state management library
- Host: GitHub
- URL: https://github.com/perry-mitchell/react-obstate
- Owner: perry-mitchell
- License: mit
- Created: 2022-08-28T19:12:34.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-08-23T07:58:31.000Z (almost 3 years ago)
- Last Synced: 2025-11-12T22:23:45.379Z (8 months ago)
- Language: JavaScript
- Size: 263 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# React Obstate
> React hooks for the generic object state management library `obstate`
[](https://www.npmjs.com/package/react-obstate) 
[`obstate`](https://github.com/perry-mitchell/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:
```tsx
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 (
The current value is: {currentValue}
setValue(currentValue + 1)}>Increment
);
}
```
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:
```tsx
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 (
The current value is: {state.test}
Power is
setPartial({ test: state.test + 1 })}>Increment
setPartial({ on: !state.on })}>Toggle
);
}
```
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.