1.0.0 • Published 4 years ago
react-autofill-component v1.0.0
react-autofill-component
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.
Install
npm install --save react-autofill-component
Props
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. |
Styling Props
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. |
Usage
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}
/>
}
}
Contribute
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
License
MIT © arjayosma
1.0.0
4 years ago