use-reactive-state
v1.0.1
Published
useReactiveState() - a reactive alternative to React's useState()
Downloads
11
Maintainers
Readme
useReactiveState()
- a reactive alternative to React's useState()
Installation
$ npm install use-reactive-state
Example
// 'useReactiveState()' example
// Interactive demo: https://codesandbox.io/s/busy-khorana-euf58
import React from 'react';
import useReactiveState from 'use-reactive-state';
function Counter() {
let state = useReactiveState({count: 0});
return (
<div>
<p>You clicked {state.count} times</p>
<button onClick={function () { state.count += 1; }}>
Click me
</button>
</div>
);
}
// 'useState()' example
// Interactive demo: https://codesandbox.io/s/gifted-glade-hp0pi
import React, {useState} from 'react';
function Counter() {
let [state, setState] = useState({count: 0});
return (
<div>
<p>You clicked {state.count}</p>
<button onClick={function () {
setState({
...state,
count: state.count + 1
});
}}>
Click me
</button>
</div>
);
}
Type definition of useReactiveState()
interface InitialState {
[key: string]: any;
}
interface State {
[key: string]: any;
}
declare function useReactiveState(initialState: InitialState): InitialState | State;
Limitation of useReactiveState()
state
cannot be destructured:
// This won't work
let {count} = useReactiveState({count: 0});
// This will work
let state = useReactiveState({count: 0});