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.
;;; static defaultProps = fruit: 'bananas' 'strawberries' 'blueberries' 'pineapples' 'apples' 'tomatos' 'mangos' 'oranges' 'grapes' 'Rasberries' 'Blackberries' 'starfruit' ; static propTypes = fruit: PropTypes ; { superprops; } { console; } { return <div> <Autocomplete id="fruit" placeholder="Search a type of fruit" data=thispropsfruit onSelected=thisonItemSelected /> </div> ; } ;
Options
id ~ required
The unique id
of the component - used for setting up accessibility
<Autocomplete id="fruit" />
null
placeholder ~ optional ~ default 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" />
true
fuzzy ~ optional ~ default 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 />
false
caseSensitive ~ optional ~ default An boolean
that allows for case sensitive search
<Auocomplete caseSensitive=false />
onChange ~ optional
A method
fired when user changes the input value
{ console;} <Auocomplete onChange=thisonInputChange />
onSelected ~ optional
A method
fired when user changes the input value
{ console;} <Auocomplete onSelected=thisonItemSelected />
Styling
Installation
Import the main SCSS file in to your application SCSS files
;
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
;
Tests
npm test