react-autocompleter

React AutoCompleter

A React component which filters on phrases and returns similar results, with a simple API, keyboard navigation and no style hijacking.

npm install react-autocompleter --save

http://invertase.github.io/react-autocompleter/example

Basic Usage

import React, { Component } from 'react';
import AutoCompleter from 'react-autocompleter';

const data = [
    'phrase one',
    'phrase two'
];

class MyComponent extends Component {

    render() {
        return (
            <AutoCompleter
                data={ data }
                placeholder='Search...'
                limit={ 10 }
            />
        );
    }

}

Styling

By default this component does not provide any styling, however it gives you the ability to easily style the specific component yourself:

CSS Classes

Pass in an object of class names to the component, and style with your own CSS/LESS/SASS like any other HTML element:

classes={ {
    root: 'autocomplete',
    input: 'autocomplete-input',
    listContainer: 'autocomplete-container',
    listItems: 'autocomplete-items'
} }

Inline Styles

Pass an object on inline styles directly into the component:

styles={ {
    root: {
        padding: '10px'
    },
	input: {
		fontSize: '14px'
	},
	listContainer: {
		listStyleType: 'none',
		background: '#ffffff',
		padding: '20px'
	},
	listItems: {
		padding: '15px',

		'.active': {
			fontSize: '30px'
		}
	}
} }

Component API

placeholder (string)

A string which is injected into the input box as a placeholder.

placeholder='Search...'

data (array|required)

A single dimension array of phrases which are filtered on user input.

data={ [
    'phrase one',
    'phrase two'
] }

limit (number|default:20)

Limit the amount of filtered results returned.

Set to 0 for no limit.

limit={ 10 }

value (string)

The initial/default value on the input.

value='keyword'

keyboard (bool|default:true)

If set to false, keyboard navigation will be disabled.

keyboard={ false }

onSelect (function)

Triggered on item select, either via keyboard navigation (ENTER), or by clicking an item.

onSelect={ (item) => { console.log('selected item ', item) } }

onFocus (function)

Triggered on input box focus.

onFocus={ () => { console.log('input focused') } }

onBlur (function)

Triggered on input box blur.

onBlur={ () => { console.log('input blurred') } }

onChange (function)

Triggered on input change, including the navigated and selected value.

onChange={ (value) => { console.log('input changed to', value) } }

inputProps (object)

An object of properties which will be passed to the input element as attributes:

inputProps={ {
    type: 'password',
    name: 'bon'
} }

Development

Whilst developing, this repository makes use of webpack & webpack hot reloading.

The playground directory is the place to test changes to the component, or play around with the component API. Any changes you make, to either playground or src will be hot reloaded.

Run the script npm run playground, and open http://localhost:3000 in your browser.

Contributing

Please ensure any pull requests have been tested, and follow the linting configuration.

Run npm run lint to spot any linting issues.