diff --git a/sites/dev/docs/reference/packages/react/hooks/usestateobject/readme.mdx b/sites/dev/docs/reference/packages/react/hooks/usestateobject/readme.mdx index c6e96bb463b..c6091f22207 100644 --- a/sites/dev/docs/reference/packages/react/hooks/usestateobject/readme.mdx +++ b/sites/dev/docs/reference/packages/react/hooks/usestateobject/readme.mdx @@ -2,6 +2,81 @@ title: useStateObject --- -:::note -This page is yet to be created -::: + +import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' +import { Popout } from '@freesewing/react/components/Popout' +import { Tab, Tabs } from '@freesewing/react/components/Tab' + + + +The **useStateObject** hook provides state management with a `lodash.get`-style +update handler. + +It allows one to update specific parts of a state object without having to +re-construct the new state object yourself. + +It is named `useStateObject` because it is intended to be used for objects. Do +not use this for scalar values where React's native `useState` hook is a better fit. + +## Example + +```js +import { useStateObject } from '@freesewing/react/hooks/useStateObject' + +const MyComponent = () => { + const [value, update, replace] = useStateObject(initialObject) + + // ... +} +``` + +## Return value + +This hook returns an array with three entries: + +- [value](#value) +- [update](#update) +- [replace](#replace) + +### value + +This holds the current value of the object managed by this state. + +### update + +This method allows you to update the state. It takes two parameters: + +```js +function update( + string|array path, // The path to the property to set + mixed value, // The value to set +) +``` + +The `path` can be specified as either a dot-notation path, or an array. +These two update calls are equivalent: + +```js +// These do the same thing +update('some.nested.key', "new value here") +update(['some', 'nested', 'key'], "new value here") +``` + +You can also specify multiple update operations by passing them as an array +of arrays with `path` and `value` elements: + +```js +// Update multiple keys in one call +update([ + [ 'some.nested.key', "new value here" ], + [ ['some', 'other', 'key'], { some: "other value" } ], + [ "one.more", "example" ] +]) +``` + +### replace + +This method takes a value that will completed replace the object kept in state. + + +