DebouncedInput | Pol-ui - A beautiful and functional UI library for React and Next.js

The DebouncedInput component is a simple input that debounces the input value to avoid unnecessary re-renders.

It's also super powerful when using this input when you need to make a request to an API when the user is typing, you can reduce the number of requests by using the debounce feature.

Importation

Import the component from pol-ui to use the conveyor element:

import { DebouncedInput } from "pol-ui";

Default DebouncedInput

import { DebouncedInput } from "pol-ui";
 
import React from "react";
 
const DebouncedInputComponent = () => {
  const [value, setValue] = useState("");
 
  return (
    <>
      <DebouncedInput
        label="The returned value is debounced by 500ms (default)"
        onChange={(v) => setValue(e)} // <- The parameter is directly the value
        placeholder="Type something..."
        value={value}
      />
      <p className="mt-4">Value: {value}</p>
    </>
  );
};
export default DebouncedInputComponent;

Props

Prop name	Type	Default	Description
delay	number	500	The delay in milliseconds before the value is sent.
onChange	(value: string) => void		The function that will be called when the value changes.
value	string		The value of the input.

💡

You can also sent any prop available in the Input component to the DebouncedInput.

Examples

Custom delay

To change the delay of the DebouncedInput, you can use the delay prop to set the delay in milliseconds.

Short delay

For example, you can set the delay to 10ms to send the value as soon as the user stops typing.

Short delay

import { DebouncedInput } from "pol-ui";
 
import React from "react";
 
const DebouncedInputComponent = () => {
  const [value, setValue] = useState("");
 
  return (
    <>
      <DebouncedInput
        label="The returned value is debounced by 10ms"
        delay={10}
        onChange={(v) => setValue(e)} // <- The parameter is directly the value
        placeholder="Type something..."
        value={value}
      />
      <p className="mt-4">Value: {value}</p>
    </>
  );
};
export default DebouncedInputComponent;

Long delay

If you need to wait a little bit more before sending the value, you can also set a longer delay.

Long delay

import { DebouncedInput } from "pol-ui";
 
import React from "react";
 
const DebouncedInputComponent = () => {
  const [value, setValue] = useState("");
 
  return (
    <>
      <DebouncedInput
        label="The returned value is debounced by 1000ms (1s)"
        delay={1000}
        onChange={(v) => setValue(e)} // <- The parameter is directly the value
        placeholder="Type something..."
        value={value}
      />
      <p className="mt-4">Value: {value}</p>
    </>
  );
};
export default DebouncedInputComponent;

With error

As well with the Input component, you can also use the DebouncedInput with the error prop and a helperText to show an error message.

Long delay

import { DebouncedInput } from "pol-ui";
 
import React from "react";
 
const DebouncedInputComponent = () => {
  const [value, setValue] = useState("");
 
  return (
    <>
      <DebouncedInput
        color="error"
        helperText="This is an error"
        label="The returned value is debounced by 500ms (default)"
        onChange={(v) => setValue(e)} // <- The parameter is directly the value
        placeholder="Type something..."
        value={value}
      />
      <p className="mt-4">Value: {value}</p>
    </>
  );
};
export default DebouncedInputComponent;

Theme

The DebouncedInput component uses the same theme as the Input component.