Provides a React Hook interface to manipulate a state object.

Usage no npm install needed!

<script type="module">
  import sharynReactHooksUsestateobject from 'https://cdn.skypack.dev/@sharyn/react-hooks.usestateobject';


🌹 @sharyn/react-hooks.usestateobject

import { useStateObject } from '@sharyn/react-hooks'
// or import useStateObject from '@sharyn/react-hooks/useStateObject'
// or import useStateObject from '@sharyn/react-hooks.usestateobject'

const Cmp = () => {
  const [fields, { set: setField }] = useStateObject()

  return (
        onChange={e => setField('firstname', e.target.value)}
        value={fields.firstname || ''}
        onChange={e => setField('lastname', e.target.value)}
        value={fields.lastname || ''}
      <button onClick={() => console.log(fields)}>Print</button>


useStateObject(initialStateObject): Pass an initial object to the hook, defaults to {}. You can pass null to it.


[stateObject, { set, setAll, del, clear, assign, merge }]

set(key, value): Sets the value for the key

setAll(obj): Replace the entire state object

del(key): Deletes the value for the key

clear(): Resets the state object to {}

merge(obj): Merge the state object deeply with an other object using Lodash's merge.

assign(obj): Merge the state object shallowly with an other object using Object.assign().

⚠️ Warning ⚠️

Unfortunately you cannot call multiple modifier functions in a row. This won't work:

onClick={() => {
  set('a', 1)
  set('b', 2)

This is due to the asynchronous nature of React's useState (calling setState multiple times in a row also doesn't work, but in the context of an object it's more confusing). There may be better implementations, but for now, combine all your modifications into one using merge, assign, or setAll:

onClick={() => {
  merge({ a: 1, b: 2 })

This package is part of Sharyn, a collection of utilities and helpers.