React Native component that renders an Input with delayed onChangeText
npm install --save react-native-debounce-input
yarn add react-native-debounce-input
import React, { useState, createRef } from "react";
import { SafeAreaView, Text } from "react-native";
import DelayInput from "react-native-debounce-input";
const YourComponent = () => {
const [value, setValue] = useState("Have");
const inputRef = createRef();
return (
<SafeAreaView>
<DelayInput
value={value}
minLength={3}
inputRef={inputRef}
onChangeText={setValue}
delayTimeout={500}
style={{ margin: 10, height: 40, borderColor: "gray", borderWidth: 1 }}
/>
<Text>value: {value}</Text>
</SafeAreaView>
);
};
export default YourComponent;
A function called after some delay when a value is changed
Initial value of the input
Minimal length of text to start notify, if value becomes shorter then minLength
(after removing some characters), there will be a notification with empty value ''
.
Timeout to call onChangeText
prop after last edit input text
Will pass ref={inputRef}
to TextInput element. We needed to rename ref
to inputRef
since ref
is a special prop in React and cannot be passed to children.
MIT