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

Package Rankings

Top 23.81% on Npmjs.org

Badges

Extracted from project README