https://github.com/marinoandrea/react-debounced-input

Simple React input component that debounces calls to onChange.
https://github.com/marinoandrea/react-debounced-input

debounce debouncing input react reactjs

Last synced: 4 months ago
JSON representation

Simple React input component that debounces calls to onChange.

• Host: GitHub
• URL: https://github.com/marinoandrea/react-debounced-input
• Owner: marinoandrea
• License: mit
• Created: 2023-05-28T17:08:48.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-06-03T10:11:48.000Z (almost 3 years ago)
• Last Synced: 2025-10-28T19:26:47.759Z (7 months ago)
• Topics: debounce, debouncing, input, react, reactjs
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@marinoandrea/react-debounced-input
• Size: 20.5 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-debounced-input

[![ci](https://github.com/marinoandrea/react-debounced-input/actions/workflows/ci.yaml/badge.svg)](https://github.com/marinoandrea/react-debounced-input/actions/workflows/ci.yaml)

[![codecov](https://codecov.io/gh/marinoandrea/react-debounced-input/branch/main/graph/badge.svg?token=CLH2HL36PS)](https://codecov.io/gh/marinoandrea/react-debounced-input)

![npm](https://img.shields.io/npm/v/@marinoandrea/react-debounced-input)

![GitHub](https://img.shields.io/github/license/marinoandrea/react-debounced-input)

Simple React input component that debounces calls to `onChange`. It behaves like a `` everywhere else.

## Install

With npm:

```bash

npm i --save @marinoandrea/react-debounced-input

```

With Yarn:

```bash

yarn add @marinoandrea/react-debounced-input

```

## Usage

Search bar using `@tanstack/react-query`:

```JSX

import { DebouncedInput } from "@marinoandrea/react-debounced-input";

import { useState } from "react";

import { useQuery } from '@tanstack/react-query'

export default function App() {

  const [query, setQuery] = useState("");

  const query = useQuery({

    queryKey: ["search", query],

    queryFn: async () => {

        // perform some network request using the query

    }

  });

  return (

    


       setQuery(e.currentTarget.value)}

       />

    

  );

}

```


_Note: The call to `setQuery` is gonna be debounced by `300` milliseconds but the input value is still gonna change immediately as it's not controlled here._

## Authors

- **Andrea Marino** - ([marinoandrea](https://github.com/marinoandrea))

See also the list of [contributors](https://github.com/marinoandrea/reactome-graph/contributors) who participated in this project.