react-inline-predict
A simple and customizable React component to show inline predictive text based on user input and a dictionary.
- Start writing to see suggestions
- Use
Tab
orEnter
to autocomplete - Use
Up
andDown
arrows to navigate suggestions
Installation
To install, you can use npm:
$ npm install --save react-inline-predict
Usage
The component is inserted in place of your normal [Input] field, passing all the props that you would normally pass.
- type
- name
- placeholder
- onChange
- onKeyPress
- ...
Example:
<InputPredict ="text" ="name" ="colorname" = />
When the user input changes, the function passed as onValueChange
prop is called, with the arguments being value
and match
, match
is true when the user value matches one of the values in the dictionary.
<InputPredict ="text" ="name" ="colorname" = />
...
{ // value: holds the user input value // match: whether the value matches one the values in the dictionary/suggestion if match ; }
To Enable the prediction, you'll have to pass one of two additional props; dictionary
or suggestion
.
Using an Array
If you pass an array to the component through the prop dictionary
, the component will search through the array to find the best matches starting with the user's input.
<InputPredict ="text" ="name" ="colorname" = = />
Manually
If you want to handle the prediction in any other way, via an API, or in a particular way, you can process the user's input using the onChange
hook, and then pass the prediction through the prop suggestion
{ if !match const prediction = ; this; }
...
<InputPredict ="text" ="name" ="colorname" = = />
Styles
Styles can be passed inline through the two props inputStyle
and suggestionStyle
.
<InputPredict ="text" ="name" ="colorname" = = = = />
Alternatively, you can add css properties to the classes used internally by the component;
Keep in mind that there are default styles that are important for the functionality of the component, and passing the styles inline via props overrides that.
// Default StylesinputStyle = background: "transparent" zIndex: "0"suggestionStyle = position: "absolute" top: "0" background: "transparent" zIndex: "-1"
Notes
This component is completely isomorphic; it's perfectly safe to use with server-side rendering.
API Change
For users up to version 1.1.2
, you'll now have to use prop onValueChange
to hook into user input changes, as onChange
will no longer register value changes when the user presses Tab
or Enter
.