Brandons-npm-package-test-6278 NPM

React Autocomplete Input Component

import { AutoComplete } from 'react-autocomplete-input-component';

<AutoComplete
        getPropValue={(listItem) => listItem.name}
        showAll={true}
        highlightFirstItem={false}
        clearOnSelect={false}
        inputProps={{
          placeholder: "search..."
        }}
        list={[
          { name: 'Tom', id: 3233 },
          { name: 'Tommy', id: 3445 },
          { name: 'Thomas', id: 3663 }
        ]}
        inputStyle={{
          width: "200px",
          padding: "5px"
        }}
        highlightedItem={{
          backgroundColor: "gray"
        }}
        wrapperDiv={ "flex" }
        listItemStyle={{
          cursor: "pointer",
          padding: "5px"
        }}
        dropDownStyle={{
          backgroundColor: "antiquewhite",
          width: "215px"
        }}
        onSelect={(selectedItem, list) => {
          for (let i = 0; i < list.length; i++) {
            if (selectedItem === list[i].name) {
              console.log(list[i])
            }
          }
        }}
      />

Install

npm

npm install --save react-autocomplete-input-component

Props

`list: Array`

Array of the values to be searched for a match to the user input
Values are first inserted and stored into a trie data structure
List values that match the user's input will be displayed in the dropdown
getPropValue: Function is needed if list array contains objects

`getPropValue: Function` (Optional)

Only needed if list contains objects
Sets the object property value to be extracted and displayed in dropdown

`onSelect: Function`

Function that will run when list item is selected
Has access to the item selected and the original list array
If the selected item is a number it will be returned as a string

`clearOnSelect: Boolean` (Optional)

true (default) the input will clear when an item is selected
false value selected will become the input value
onMouseDown can be used in inputProps to clear the input

`inputProps: Object`

Sets HTML text input attributes with some exceptions
Type and Autocomplete are unable to be overridden
Some Event handlers such as onClick can be used
onClick, onChange, onKeyDown, onFocus cannot be overridden

  inputProps={{
    placeholder: "search...",
    onMouseDown:(e) => {e.target.value = ""}
  }}

`showAll: Boolean` (Optional)

false (default) dropdown doesn't appear until input value matches an item's prefix
true - If the input is focused and empty the dropdown displays all list items

`highlightFirstItem: Boolean` (Optional)

true (default) - automatically highlights first item in dropdown
false - Press arrow key or hover with mouse to highlight

`wrapperDiv: String` (Optional)

Default ('block') the component is wrapped in a div display: 'block'
wrapperDiv prop accepts one of five strings
( 'block', 'flex', 'inline-block', 'inline', 'contents' )

`disableOutsideClick : Boolean`

false (default) the dropdown closes when mouse is clicked outside of wrapperDiv
true the dropdown only closes when onSelect fires or tab key is pressed
!!! NOTE to control the dropdown with updateIsOpen and keep this enabled, the element controlling the event should have a className of ignore

`isOpen : Boolean`

This prop is used to set the position of the dropdown in the AutoComplete component
It is only necessary when using updateIsOpen to control the dropdown
true is passed in to open the dropdown
false is passed in to close the dropdown

`updateIsOpen: Function`

Function used to update the parent with the current position of the dropdown
Runs when dropdown opens by entering text or closes by clicking outside of the element

  const [openDropDown, setOpenDropDown] = useState()

  const toggleDropDown = () => {
    setOpenDropDown(openDropDown ? false : true)
  }

return(
<>
  <button className='ignore' onClick={toggleDropDown} />
  <AutoComplete
    updateIsOpen={(updatedState) => {
      setOpenDropDown(updatedState)
    }}

    isOpen={openDropDown}
  />
</>
)