DebouncedTextField
DebouncedTextField
is a variation of the standard TextField
component designed to delay the invocation of the
onChange
callback. This delay helps in reducing the number of onChange
calls for inputs that may have
frequent updates, such as during typing.
Usage
To use DebouncedTextField
, import it from your components. It supports all the TextField
props including value
, onChange
among others.
Basic DebouncedTextField
This example shows a basic usage of the DebouncedTextField
, demonstrating how it can be used to handle value changes with a defer mechanism to reduce the number of updates.
import React, { useState } from "react";
import { DebouncedTextField } from "@firecms/ui";
export default function DebouncedTextFieldBasicDemo() {
const [value, setValue] = useState("");
const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
setValue(event.target.value);
};
return (
<div>
<DebouncedTextField
value={value}
onChange={handleChange}
/>
</div>
);
}