react-predictive-input
v1.2.5
Published
WAI-ARIA compliant React autocomplete component
Downloads
37
Maintainers
Readme
react-predictive-input
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