A dead simple react hook for complex multi-level state objects
You know the drill, right?
npm i react-object-hook
or
yarn add react-object-hook
This thing's so simple your grandma could do it.
import useObject from 'react-object-hook';
const initialState = {
a: 1,
b: 2,
c: 3,
d: {
foo: 'bar',
zoo: 'boomafoo',
thing: {
a: 'majig',
}
}
}
const MyComponent = props => {
const {state, setState, getState} = useObject(initialState);
console.log(state); // logs initialState
console.log(getState('d.thing.a')); // majig
setStatePath('meme', 'd.thing.a');
console.log(getState('d.thing.a')); // meme
return (
<div>Get the d: {getState('d.thing.a')}</div>
)
}
Maaaaa do I really gotta? UGH OK NO NEED TO NAG!
useObject(initialState)
The initial state must be an object. GEE I WONDER WHY.
Returns an object with the following possible properties:
state
: The object with the current value, just like any other react state in the history of react states.setStatePath
: A function with 2 arguments:value
: The value to set into the state. If there is no path, this should be an object and will override the entire stored object.path
: A path to the property to change. Standard lodash path. See Lodash Documentation for deets.
getState
: A function that takes a path and returns the value at that path (instead of the whole object, for optimization).path
: See above, same dealdefault
: Value returned if the path leads to an undefined value. Just like lodash get().
setState
: A function that takes in an object and merges it with the current object value, in a recursive fashion. This... is pretty much like the oldsetState
's behaviour, sort of. Remember setState? Oh, but it doesn't provide the "old state", just usestate
for that!
I can't promise anything but I'm sure I'll update this with more features eventually. Feel free to suggest stuff.
And uhh... testing, I guess. Yeah, testing...
I like sarcasm and stuff but I'm not protective of the stuff I do. PR this thing with non-shitty code and I'll definitely consider hitting that Merge button. Cuz you're awesome!