react-predictive-input

npm

WAI-ARIA compliant React autocomplete component

Demo

https://jfusco.github.io/react-predictive-input

Getting Started

Installation

From the root of your project.

npm install react-predictive-input --save

Usage

Implementation of autocomplete. See available options below.

import React, { Component } from 'react';
import { render } from 'react-dom';
import Autocomplete from 'react-predictive-input';
 
class Application extends Component{
    static defaultProps = {
        fruit: ['bananas', 'strawberries', 'blueberries', 'pineapples', 'apples', 'tomatos', 'mangos', 'oranges', 'grapes', 'Rasberries', 'Blackberries', 'starfruit']
    };
 
    static propTypes = {
        fruit: PropTypes.arrayOf(PropTypes.string)
    };
 
    constructor(props){
        super(props);
    }
 
    onItemSelected(value){
        console.log(`${value} was selected`);
    }
 
    render(){
        return (
            <div>
                <Autocomplete
                 id="fruit"
                 placeholder="Search a type of fruit"
                 data={this.props.fruit}
                 onSelected={this.onItemSelected.bind(this)} />
            </div>
        );
    }
}
 
render(<Application />, document.getElementById('application'));

Options

id
placeholder
data
value
fuzzy
clearValueOnSelect
caseSensitive
onChange
onSelected

id ~ required

The unique id of the component - used for setting up accessibility

<Autocomplete id="fruit" />

placeholder ~ optional ~ default `null`

A string used as placeholder text in the tags input field

<Autocomplete placeholder="Search a type of fruit" />

data ~ optional ~ default `[]`

An array of strings to be used as suggestions

<Autocomplete data={['apples', 'bananas']} />

value ~ optional ~ default `''`

A string to set the value of the input field

<Autocomplete value="apples" />

fuzzy ~ optional ~ default `true`

A boolean that enables fuzzy search

<Autocomplete fuzzy={true} />

clearValueOnSelect ~ optional

A boolean that allows the item to be cleared out of the input field upon selection

<Autocomplete clearValueOnSelect={true} />

caseSensitive ~ optional ~ default `false`

An boolean that allows for case sensitive search

<Auocomplete caseSensitive={false} />

onChange ~ optional

A method fired when user changes the input value

onInputChange(value) {
    console.log(`${value} is the value`);
}
 
<Auocomplete onChange={this.onInputChange.bind(this)} />

onSelected ~ optional

A method fired when user changes the input value

onItemSelected(value) {
    console.log(`${value} is the selected item`);
}
 
<Auocomplete onSelected={this.onItemSelected.bind(this)} />

Styling

Installation

Import the main SCSS file in to your application SCSS files

@import "node_modules/react-predictive-input/src/component/scss/styles.scss";

There are a few variables set to !default that can be overriden. If you need to change it more just override the actual styles.

Any overriden variables needs to go above the @import statement to take effect

//-- Global UI 
$ac-base-width 
$ac-base-border-radius 
$ac-base-font-family 
 
//-- Input field 
$ac-input-height 
$ac-input-width 
$ac-input-font-size 
$ac-input-border 
$ac-input-font-color 
$ac-input-background-color 
$ac-input-border-radius 
$ac-input-padding 
$ac-input-placeholder-color 
$ac-input-border-focus-color 
$ac-input-font-family 
$ac-input-typeahead-font-color 
 
//-- Suggestion list 
$ac-slist-border-radius 
$ac-slist-background-color 
 
//-- Suggestion 
$ac-s-mark-font-color 
$ac-s-mark-background 
$ac-s-mark-font-weight 
$ac-s-active-background-color 
$ac-s-active-font-color 
$ac-s-font-color 
$ac-s-font-size 
$ac-s-background-color 
$ac-s-font-family 
$ac-s-border 
$ac-s-padding

If you don't care to override variables and just want to override actual styles you may choose to import the minified compiled version of the css instead

@import "node_modules/react-predictive-input/dist/styles.css";

Tests

npm test

npm