Neolithic Psychedelic Mushrooms

    @vtex/admin-ui-hooks
    TypeScript icon, indicating that this package has built-in type declarations

    0.4.0 • Public • Published

    @vtex/onda-hooks

    Onda shared hooks

    Documentation site: https://admin-ui-docs.vercel.app/guide/get-started/

    NPM

    Installation

    React v16.8 and above is required.

    yarn add @vtex/onda-hooks

    Hooks

    useDebounce

    Keeps a debounced value.

    function Input() {
      const [text, setText] = React.useState('Hello')
      const [value] = useDebounce(text, 1000)
    
      return (
        <div>
          <input
            defaultValue={'Hello'}
            onChange={(e) => {
              setText(e.target.value)
            }}
          />
          <p>Actual value: {text}</p>
          <p>Debounce value: {value}</p>
        </div>
      )
    }

    useDebouncedCallback

    Besides useDebounce for values you can debounce callbacks, that is the more commonly understood kind of debouncing

    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 (
        <div>
          <input
            defaultValue={defaultValue}
            onChange={(e) => debounced(e.target.value)}
          />
          <p>Debounced value: {value}</p>
        </div>
      )
    }

    useDebouncedState

    Keeps the state of a debounced callback.

    function Input() {
      const [state, setState] = useDebouncedState({
        initialState: '',
        timeoutMs: 250,
      })
    
      return (
        <div>
          <input
            style={{
              border: '1px solid #333',
            }}
            defaultValue="Default value"
            onChange={(e) => setState(e.target.value)}
          />
          <p>Debouced state: {state}</p>
        </div>
      )
    }

    You can also use produce to apply state changes.

    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

    useDebouncedCache

    Same as useDebouncedState but it keeps the state, debounced state and setState

    function Input() {
      const [state, debouncedState, setState] = useDebouncedCache({
        initialState: '',
        timeoutMs: 250,
      })
    
      return (
        <div>
          <input
            style={{
              border: '1px solid #333',
            }}
            value={state}
            onChange={(e) => setState(e.target.value)}
          />
          <p>State: {state}</p>
          <p>Debouced state: {debouncedState}</p>
        </div>
      )
    }

    Like useDebouncedState, you can use produce to apply state changes.

    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

    useQueryState

    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

    function Input() {
      const [initialState, setState, state] = useQueryState({
        keys: ['search'],
      })
    
      return (
        <QueryStateProvider>
          <input
            defaultValue={initialSate}
            onChange={(e) => {
              setState({ serach: e.target.value })
            }}
          />
          <p>Actual value: {state.search}</p>
          <p>Initial value: {initialState.search}</p>
        </QueryStateProvider>
      )
    }

    Keywords

    none

    Install

    npm i @vtex/admin-ui-hooks

    DownloadsWeekly Downloads

    1,380

    Version

    0.4.0

    License

    MIT

    Unpacked Size

    91.3 kB

    Total Files

    65

    Last publish

    Collaborators

    • thiagof7
    • gleicy-vtex
    • rafael.sangalli.vtex
    • vtexlab-user
    • lenderson_morais
    • wender
    • natamelo
    • mairatma
    • vlagedo_vtex
    • samuelfgs
    • mayzabel
    • rafabac
    • augusto.lazaro
    • tergol
    • rafarubim
    • analuizamtg
    • gustavorosolem
    • arthurepc
    • jeymisson
    • marcosvcp
    • victorhmp
    • lurian
    • ericreis
    • lbebber
    • tlgimenes
    • arturpimentel
    • anitavincent
    • brunojdo
    • brunohq
    • lucasecdb
    • matheusps
    • emersonlaurentino
    • viniagostini
    • hugo.cabral
    • lucasaarcoverde
    • lariciamota
    • wdsrocha
    • icazevedo
    • edunmc
    • fabits
    • mateuspontes
    • gmantiqueira
    • vitorlgomes
    • rodolfoams
    • policarpo
    • marcelovicentegc
    • maianabt
    • jeffersontuc
    • hiagolcm
    • william.silva