[react] feat: Added docs for hooks/useStateObject
This commit is contained in:
parent
717482f4ab
commit
0740291523
1 changed files with 78 additions and 3 deletions
|
@ -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'
|
||||
|
||||
<DocusaurusDoc>
|
||||
|
||||
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.
|
||||
|
||||
</DocusaurusDoc>
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue