react-async-search-dropdown v1.1.4

react-async-search-dropdown

Simple customizable async dropdown with search! https://scouns.github.io/react-async-search-dropdown/

Install

npm install --save react-async-search-dropdown

Usage

import * as React from 'react'

import AsyncSearchDropdown from 'react-async-search-dropdown'

class AsyncSearchDropdown extends React.Component {
  render () {
    return (
       <AsyncSearchDropdown
                leftIcon={true}
                defaultListStyling={false}
                canClearAll={true}
                onChange={(values)=> {
                }}
                placeholder={'Search here...'}
                getItems={(input) => {
                  return new Promise(async (resolve, reject) => {
                  try {
                   resolve(items);
                  }
                  catch (e) {
                  console.error('Fail', e);
                  reject(e);
                }
                });
                }}
                renderItem={(value, i, isActive) => (
                  <div
                    key={value.id + i}
                    style={{}}
                  >
                    {value.label}
                  </div>
                )}
              />
    )
  }
}

Props

  leftIcon - A boolean for if you want a search icon 
  canClearAll - An X button will show that clears all selectedItems onClick
  defaultListStyling - A boolean for if you want to use predefined styling for the popover list, the renderItem prop will then be invalid
  onChange - The onChange event occurs when there have been changes to the selectedItems
  placeholder - Placeholder text for the input. The text will be replaced by the label of the items you select
  getItems - Based on the input on the dropdown it returns a list with items that renders in the dropdown
  renderItem - A render props for if you want to style the popover list yourself

License

MIT © Scouns