Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/todor2810/use-reactive-state
useReactiveState() - a reactive alternative to React's useState()
https://github.com/todor2810/use-reactive-state
Last synced: about 1 month ago
JSON representation
useReactiveState() - a reactive alternative to React's useState()
- Host: GitHub
- URL: https://github.com/todor2810/use-reactive-state
- Owner: todor2810
- License: mit
- Created: 2019-07-01T13:37:31.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-19T18:30:50.000Z (almost 2 years ago)
- Last Synced: 2024-05-17T22:47:37.555Z (7 months ago)
- Language: TypeScript
- Homepage:
- Size: 117 KB
- Stars: 13
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-react-hooks - `use-reactive-state` - a reactive alternative to React's `useState()`. (Packages)
- awesome-react-hooks-cn - `use-reactive-state` - a reactive alternative to React's `useState()`. (Packages)
- awesome-react-hooks - `use-reactive-state` - a reactive alternative to React's `useState()`. (Packages)
- awesome-react-hooks - `use-reactive-state` - a reactive alternative to React's `useState()`. (Packages)
README
`useReactiveState()` - a reactive alternative to React's `useState()`
---
## Installation
```
$ npm install use-reactive-state
```## Example
useState()
useReactiveState()```javascript
function Counter() {
const [state, setState] = useState({count: 0});return (
You clicked {state.count}
{
setState({
...state,
count: state.count + 1
});
}}>
Click me
);
}
``````javascript
function Counter() {
const state = useReactiveState({count: 0});return (
You clicked {state.count} times
{ state.count += 1; }}>
Click me
);
}
```## Limitation of `useReactiveState()`
- `state` cannot be destructured:
```javascript
// This won't work
const {count} = useReactiveState({count: 0});
``````javascript
// This will work
const state = useReactiveState({count: 0});
```