React-Awesome-Combobox ·

React-Combobox is a React library for building autocomplete searchbox in an easy and fully customizable way.

Installation

npm install --save react-awesome-combobox

Preview

Usage

import { Combobox } from 'react-awesome-combobox';
const data=[
    {name: 'Marouen Mhiri', age: 40, car: {carMake: 'VW', year: '2018'}},
    {name: 'Tanja Bernhardt', age: 35, car: {carMake: 'Audi', year: '2017'}},
    {name: 'Adam Mhiri', age: 5, car: {carMake: 'Mercedes', year: '2018'}},
    {name: 'Hanna Miriam Mhiri', age: 3, car: {carMake: 'VW', year: '2016'}},
    {name: 'Jasmin Gallas', age: 12, car: {carMake: 'Skoda', year: '2018'}},
    {name: 'Sofia M`hiri', age: 10, car: {carMake: 'Seat', year: '2015'}},
    {name: 'Sofiene Attia', age: 20, car: {carMake: 'Skoda', year: '2018'}},
];
return (
    <Combobox
        placeholder='Placeholder'
        bgColor='cadetBlue'
        data={data}
        filterProperty='car/carMake'
        display={{
            seperator: ',',
            fields: ['name', 'age', 'car/carMake', 'car/year']
        }}
        highlight
        itemHeight={40}
        visibleItems={4}
        onSelectItem={(sugg) => console.log(sugg)}
    />
);

or (with a simple array of strings)

import { Combobox } from 'react-awesome-combobox';
const names = ['John', 'Marouen', 'Tanja', 'Hanna', 'Sofia', 'Adam', 'Rafif'];
return (
    <Combobox
        placeholder='Search for name...'
        bgColor='green'
        data={names}
        itemHeight={50}
        visibleItems={3}
        onSelectItem={(sugg) => console.log(sugg)}/>
    </div>
);

Props

| Prop | Type | Required | Description | | :--- | :--- | :---: | :--- | | data | Array | ✓ | These are the suggestions that will be displayed. Items can take an arbitrary shape. | | plaeholder | String | | will display the placeholder of the input field. | | bgColor | String | | When set it will style the background color of the suggestions when moved using keyboard arrows. Default is "#6B9FCE". | | filterProperty | String | ✓* | When Implement it to teach Autosuggest what should be the input value when suggestion is clicked. | | display | Object | | Gives the possibility to customize the suggestions. If your data is an array of objects and you filter for a specific property but want to display others. With this property it is possible (See Example here) | | highlight | Boolean | | highlights the occurences in the suggestions using the mark tag. | | itemHeight | Number | | specifies the items height of the suggestions dropdown. | | visibleItems | Number | | sets the limit of the suggestions to see and make the dropdown scrollable. | | onSelectItem | Function | | A Callback function that will be triggered after selecting a suggestion. This function has as parameter the selected object.

data [REQUIRED] the list of the suggestions to filter. This can be a simple array of i.e. strings, numbers, booleans... or an array of objects. This property is REQUIRED.

placeholder [OPTIONAL] the placeholder to show in the input field.

bgColor [OPTIONAL] the Background color of the suggestions when visited with keyboard up/down-arrows.

filterProperty [OPTIONAL] the Property to search for in the list of the suggestions. This property works with the property data when it's an array of objects. filterProperty can contain '/'-sign to specify the property levels to search for.

display [OPTIONAL] Object specifying which property of the searched object should appear in the search result and how they should be seperated. display property when used should have this shape:

display = {{
    // or any other sign '|', ':', ' '...
    seperator: ',', 
    // Array of existing object properties
    fields: ['name', 'car/year'] 
}}

highlight [OPTIONAL] when true the found search string will be highlighted using the <mark />-html Tag

itemHeight [OPTIONAL] a number specifies the height of the suggestions boxes (this number will be used as pixel height) - default = 40

visibleItems [OPTIONAL] a maximum number of suggestions to see. The rest will be reached when scrolled or by tapping UP/Down Keys. Default = 4

onSelectItem [OPTIONAL] a callback function which will be called after a selection of a suggestion took place. this function recieves a suggestion item as parameter. I.e. use onSelectItem={(sugg) => console.log(sugg)} to see the result.

License

React-awesome-combobox is MIT licensed.