react-auto-fill-box

0.1.3 • Public • Published

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)

Package Sidebar

Install

npm i react-auto-fill-box

Weekly Downloads

0

Version

0.1.3

License

MIT

Unpacked Size

16 kB

Total Files

10

Last publish

Collaborators

  • raveendrak