React Autofill Component is a bite-sized React component that provides an autofill or auto-suggestion for every keystroke and can be completed by pressing tab.
npm install --save react-autofill-component| Prop Name | Default Value | Description |
|---|---|---|
autofillValue |
'' |
The autofill placeholder value. When the tab key is pressed (if completeOnTab is true) the input will be auto-populated. |
completeOnTab |
true |
Identifies whether the input text will be completed on pressing the tab key. By default, this is set to true. |
disabled |
false |
Disables the input text. |
onChange |
- | Accepts a text string. onChange(text) => console.log(text); |
placeholder |
'' |
Placeholder value when the autofill value is empty. |
value |
'' |
Text string value. |
| Prop Name | Description |
|---|---|
className |
Class name styles for the input text. |
containerClassName |
Class name styles for the input container. |
inputBgClassName |
Class name styles for the input background container. |
import React, { Component, useEffect, useState } from 'react'
import MyComponent from 'react-autofill-component'
import 'react-autofill-component/dist/index.css'
class Example extends Component {
const [text, setText] = useState('')
const [autofill, setAutofill] = useState('')
const words = ['test', 'react', 'component', 'sample']
useEffect(() => {
const [result] = words.filter((word) => word.indexOf(text) === 0)
setAutofill(
text.length > 0 && result && result.indexOf(text) === 0 ? result : ''
)
}, [text, words])
render() {
return <MyComponent
autoFillValue={autofill}
onChange={setText}
placeholder="Input value here..."
value={text}
/>
}
}If you like this small component, feel free to create a pull request or fork the repository.
- Fork it and create your feature branch: git checkout -b my-new-feature
- Commit your changes: git commit -am 'Add some feature'
- Push to the branch: git push origin my-new-feature
- Submit a pull request
MIT © arjayosma