https://github.com/prawn-cake/react-input-debouncer

Zero dependencies text input debounce function for react
https://github.com/prawn-cake/react-input-debouncer

debounce debouncing javascript react

Last synced: 4 months ago
JSON representation

Zero dependencies text input debounce function for react

• Host: GitHub
• URL: https://github.com/prawn-cake/react-input-debouncer
• Owner: prawn-cake
• License: mit
• Created: 2018-11-08T12:01:08.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-09T16:29:17.000Z (over 3 years ago)
• Last Synced: 2025-03-26T09:18:38.316Z (about 1 year ago)
• Topics: debounce, debouncing, javascript, react
• Language: JavaScript
• Homepage:
• Size: 1010 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-input-debouncer 

[![Build Status](https://travis-ci.org/prawn-cake/react-input-debouncer.svg?branch=master)](https://travis-ci.org/prawn-cake/react-input-debouncer)

## Why ?

Are you familiar with a problem of poor performance 

when filtering list of items by the input text?

A typical solution is to debounce an input change for some milliseconds. 

And many libraries exist to solve it, including famous [lodash debounce](https://lodash.com/docs/4.17.10#debounce).

Few issues with them: 

* lodash is massive and you need to do [tiresome tricks](https://stackoverflow.com/questions/23123138/perform-debounce-in-react-js) to make it work with React.

* Many of those libraries are wrappers around lodash.

* The libraries provide wrapped input components (force me to use something like ``), which is totally redundant.

This library simply provides react specific `debounce` function to use along with regular html input element.

__This is fair for [uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html), since controlled components require synchronous update.__

## Install

    npm install --save @prawn-cake/react-input-debouncer

    

    # OR

    yarn add @prawn-cake/react-input-debouncer

    

## Usage

Here I use `useState` hook, one of latest and greatest [react hooks](https://reactjs.org/docs/hooks-intro.html) features.

    

    import React from 'react';

    import { useState } from 'react'

    import debounce from '@prawn-cake/react-input-debouncer'

    

    function MyComponent({ props }) {

        [value, setValue] = useState(''); 

        return (

            

                ...

                {value}

                 setValue(e.target.value), 100)}

                />

            

        )

    }

    

`MyComponent` renders a fragment with a label and a text input elements. 

Text input is debounced for 100ms.