react-extended-state
v1.0.11
Published
A simple react provider and hook implementation to allow for state management
Downloads
4,378
Maintainers
Readme
react-extended-state
Sometimes React.useState
and React.useReducer
are not enough.
Sometimes you need to have a complex object and still be concerned about speed of your react components on updates.
Dont want to shell out for redux
? Actions are too much or confusing for you?
Then this is a perfect solution for you! A simple react provider and hook implementation to allow for state management of complex objects.
Quick overview:
- It is light
- It has type checking at its core
- Easy setup (under 5 lines)
- No more useless renders!
- Re-render filtering from the generated value
- Scope dependencies
Usage:
import React, { FC } from 'react';
import { render } from 'react-dom';
import { createExtendedState } from 'react-extended-state';
/**
* This will be destructured, so be careful of what the top state is
**/
type State = Readonly<{ name: string }>;
const { Provider, useExtendedState, useExtendedStateDispatcher } = createExtendedState<State>();
const App: FC = () => {
const name = useExtendedState((s) => s.name);
const dispatch = useExtendedStateDispatcher();
return (
<div>
<label>
Name:
{name}
</label>
<input type="text" value={name} onChange={(e) => dispatch({ name: e.target.value })} />
</div>
);
};
render(
<Provider value={{ name: '' }}>
<App />
</Provider>,
document.querySelector('#root')
);
LICENSE
MIT