use-debounce-input

Hook for debounce inputs and filtering arrays with debounce effect for react

DEMO

Install

npm install --save use-debounce-input

Basic Usage

import * as React from 'react'
import useDebounceInput from 'use-debounce-input'

const BasicUsage = () => {
  const {
    DebounceInput,
    value,
    debounceValue,
  } = useDebounceInput({
    delay: 400,
  });

  return (
    <div>
      <DebounceInput />
      <br />
      Value: {value}
      <br />
      DebounceValue: {debounceValue}
    </div>
  )
}

Basic Usage With Array

Sometimes you need the input to filter a list by specific properties, in that case you can provide items option and filterByColumns and then to use filteredItems. Remember to useMemo in case the creation of the array is inside the component that use the hook

use this options can reduce Ajax/renders when the user typing and try to filter a list

import * as React from 'react'
import useDebounceInput from 'use-debounce-input'

const WithArray = () => {
  const items = useMemo(() => [
    { id: '111-111', name: 'Ben' },
    { id: '111-222', name: 'Guy' },
    { id: '111-333', name: 'Helit' },
  ], [])
  const {
    DebounceInput,
    value,
    debounceValue,
    filteredItems
  } = useDebounceInput({
    delay: 400,
    items,
    filterByColumns: ['id']
  });

  return (
    <div>
      <DebounceInput />
      <br />
      Value: {value}
      <br />
      DebounceValue: {debounceValue}
      <br />
      <table>
        {filteredItems.map(filteredItem => (
          <tr>
            <td>{filteredItem.id}</td>
            <td>{filteredItem.name}</td>
          </tr>
        ))}
      </table>
    </div>
  )
}

Custom Filter

For custom filtering you can use filter option. The function will get (debounceValue, items, filterByColumns) params and should return newArray of filtered items. the function can be async function

(debounceValue, items, filterByColumns) => newArray

import * as React from 'react'
import useDebounceInput from 'use-debounce-input'

const AsyncFilter = () => {
  const [loading, setLoading] = useState(false);
  const items = useMemo(() => [
    { id: '111-111', name: 'Ben' },
    { id: '111-222', name: 'Guy' },
    { id: '111-333', name: 'Helit' },
  ], [])

  const someAsyncSearchMaybeAjax = () => new Promise((resolve) => {
    setLoading(true);
    return setTimeout(() => resolve(new Array(Math.floor(Math.random() * 20) + 1).fill(0).map(() => items[Math.floor(Math.random() * 3) + 0])), 3000)
  }).finally((value) => setLoading(false))

  const {
    DebounceInput,
    value,
    debounceValue,
    filteredItems
  } = useDebounceInput({
    delay: 400,
    items,
    filter: async (value) => {
      const data = await someAsyncSearchMaybeAjax(value);
      return data;
    }
  });

  return (
    <div>
      <DebounceInput />
      {loading ? 'loading...' : undefined}
      <br />
      Value: {value}
      <br />
      DebounceValue: {debounceValue}
      <br />
      <table>
        {filteredItems.map(filteredItem => (
          <tr>
            <td>{filteredItem.id}</td>
            <td>{filteredItem.name}</td>
          </tr>
        ))}
      </table>
    </div>
  )
}

Default filter function

will filter by filterByColumns case-insensitive:

(debounceValue, items, filterByColumns) => items.filter((item) => {
    return filterByColumns
      .find((column) => String(item[column])
          .toLowerCase().includes(debounceValue.toLowerCase()))
});

Options:

option	default	description
delay	0	Debounce timeout in ms.
items	-	Array that will filtered every time that the defaultValue will change by filter function
filter	defaultFilter	Function that will run once the defaultValue changed. more about that in the filter section
filterByColumns	-	Array of properties to filter by. must when use items option

License

MIT © GuySerfaty

---

This hook is created using create-react-hook.