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.

1. Fork it and create your feature branch: git checkout -b my-new-feature
2. Commit your changes: git commit -am 'Add some feature'
3. Push to the branch: git push origin my-new-feature
4. Submit a pull request

License

MIT © arjayosma