admin-ui shared hooks
npm install @vtex/admin-ui-hooksOnda shared hooks
Documentation site: https://admin-ui-docs.vercel.app/guide/get-started/
React v16.8 and above is required.
``sh`
yarn add @vtex/onda-hooks
Keeps a debounced value.
`jsx
function Input() {
const [text, setText] = React.useState('Hello')
const [value] = useDebounce(text, 1000)
return (
Actual value: {text}
Debounce value: {value}
$3
Besides useDebounce for values you can debounce callbacks, that is the more commonly understood kind of debouncing
jsx
function Input({ defaultValue }) {
const [value, setValue] = React.useState(defaultValue)
// Debounce callback
const debounced = useDebouncedCallback(
// function
(value) => {
setValue(value)
},
// delay in ms
1000
) // you should use
e => debounced(e.target.value) as react works with synthetic events
return (
onChange={(e) => debounced(e.target.value)}
/>
Debounced value: {value}
)
}
`$3
Keeps the state of a debounced callback.
jsx
function Input() {
const [state, setState] = useDebouncedState({
initialState: '',
timeoutMs: 250,
}) return (
border: '1px solid #333',
}}
defaultValue="Default value"
onChange={(e) => setState(e.target.value)}
/>
Debouced state: {state}
)
}
`You can also use
to apply state changes.`jsx isStatic
const [double, setDouble] = useDebouncedState({
initialState: 1,
timeoutMs: 250,
// the state will always be multiplied by two
produce: (s) => s * 2,
})setDouble(20) // the state will be 40
`$3
Same as
but it keeps the state, debounced state and setState`jsx
function Input() {
const [state, debouncedState, setState] = useDebouncedCache({
initialState: '',
timeoutMs: 250,
}) return (
border: '1px solid #333',
}}
value={state}
onChange={(e) => setState(e.target.value)}
/>
State: {state}
Debouced state: {debouncedState}
)
}
`Like
, you can use produce to apply state changes.`jsx isStatic
const [double, debouncedDouble setDouble] = useDebouncedState({
initialState: 1,
timeoutMs: 250,
// the state will always be multiplied by two
produce: (s) => s * 2,
})setDouble(20) // the state will be 40
// after 250ms, the debouncedDouble will be 40
`$3
Persisted keys states in query string params (URL).
Use setState to update the query string params. The state will also reflect the changes.
initial state will keep the value in the amount of component (page load).
_useQueryState should be used inside of QueryStateProvider_
jsx
function Input() {
const [initialState, setState, state] = useQueryState({
keys: ['search'],
}) return (
onChange={(e) => {
setState({ serach: e.target.value })
}}
/>
Actual value: {state.search}
Initial value: {initialState.search}
)
}
``