Neverending Perpetual Motion


    1.0.10 • Public • Published

    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

    Basic Usage

    import React, { Component } from 'react';
    import AutoCompleter from 'react-autocompleter';
    const data = [
        'phrase one',
        'phrase two'
    class MyComponent extends Component {
        render() {
            return (
                    data={ data }
                    limit={ 10 }


    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.


    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.


    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 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'
    } }


    Handling onChange & onSelect

    Since clicking a filtered item does not trigger onChange, the item is passed as the callback on the onSelect function. There might be a case where your onSelect function needs to handle both the state value and the callback value:

    selected = (value) => {
        const input = !value ? this.state.url : value;

    Browser Autofill

    Browsers like Chrome sometimes autofill input elements if you've added the name attribute something common, like "name" or "url", which overrides this components functionality (annoyingly!). To disabled this, add the following:

    inputProps={ {
    } }


    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.


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

    Run npm run lint to spot any linting issues.


    npm i react-autocompleter

    DownloadsWeekly Downloads






    Last publish