React AutoFill Box

A simple Autofill/Autocomplete component for ReactJS.

Installation

To install, run

npm i react-auto-fill-box

Usage

Example

Code

import AutoFillBox from 'react-auto-fill-box';
import { useEffect, useState } from 'react';

function App() {
const [selectionValues, setSelectionValues] = useState([])

  useEffect(()=>{
    console.log(selectionValues)
  }, [selectionValues])

  return (
    <div className="App">
      <header className="App-header">
        <AutoFillBox onSelectionUpdate={setSelectionValues} width="500px" optionsList={[
          'Option 1',
          'Option 2'
        ]} />
      </header>
    </div>
  );
}

export default App;

API

Name	Type	Default	Description
className	string	--	Additional Class Name for AutoFillBox. This does NOT override the default styles, only appends to them.
selectedOptionClassName	string	--	Additional Class Name for AutoFillBox Item. This does NOT override the default styles, only appends to them.
optionsList	string[]	[]	A List of Values for the user to choose from. By default, values other than those in this optionList are also accepted. To prevent this behaviour, modify the function passed through customValueValidator accordingly.
onSelectionUpdate	function	undefined	A callback which is to be run whenever the selected options are updated. The selected entries are passed as a string[] parameter to the function. WARNING : If you don't use this callback you will not be able to access the selected values.
customValueValidator	function	(value) => true	A Function to validate custom entries that are not present in optionsList. Must return true for a valid entry, and false otherwise. This can be useful in a scenario such as an email input field, where you have contacts, but also other email address as valid entries. NOTE : Pass an empty function that returns false to prevent custom values.
selectorKeys	string[]	["Enter", "Tab"]	The keyboard keys to be used for validating and accepting an option. WARNING : Using the keys here overrides the default behaviour of the keys, so choose them wisely.
width	string	"auto"	Width of the AutoFill Box. Alternatively you can specific width in a class name and assign that class name to className property. (You might need to mark the width CSS property as !important)