https://github.com/fi3ework/useprostate
🔩Convenient way to play with `useState` hook
https://github.com/fi3ework/useprostate
Last synced: 7 months ago
JSON representation
🔩Convenient way to play with `useState` hook
- Host: GitHub
- URL: https://github.com/fi3ework/useprostate
- Owner: fi3ework
- License: mit
- Created: 2019-02-15T13:05:04.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-02-15T13:16:18.000Z (over 7 years ago)
- Last Synced: 2024-10-19T19:58:26.304Z (over 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 35.2 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# useProState
Use `useState` in a more OOP way.
## Install
```bash
$ yarn add use-pro-state
```
or
```bash
$ npm i use-pro-state
```
## Usage
### `useProState(obj)`
`useProState` can accept an plain object or array, and return a delegated object or array. Use it as what is passed into `useProState` (it's a ES2015 `Proxy` object).
### `obj.$()`
the delegated object has a function called `$`, it will directly invoke the set function from `useState`. So use it in the way you use the set function from `useState`
## Example
```jsx
import useProState from 'use-pro-state'
const App = () => {
const david = {
name: 'David',
pets: {
dogs: ['Leo', 'Lucky'],
cats: []
}
}
const davidPro = useProState(david)
return (
{`${davidPro.name} lives with ${davidPro.pets.dogs.length + davidPro.pets.cats.length} pets`}
{
davidPro.pets.cats.push('Lisa')
davidPro.$()
}}
>
Add a cat
)
}
```
## TODO
- [ ] add test
- [ ] deal with edge case
- [ ] Support ES6 `Set` and `Map`
## License
MIT