react-predictive-input

    1.2.5 • Public • Published

    react-predictive-input

    Build Status

    peerDependency Status devDependency Status

    MIT 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 ~ 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
    

    Install

    npm i react-predictive-input

    DownloadsWeekly Downloads

    11

    Version

    1.2.5

    License

    MIT

    Last publish

    Collaborators

    • jfusco