React Predictive Text

A low-level, versatile autocomplete component for React

Installation

via NPM

• install locally to your project: npm install --save react-predictive-text@latest;

Usage

Import the component to your file as follows:

`import PText from "react-predictive-text"`

Props

the <PText /> component takes the following props:

• options -- an array of strings that may be used to auto-complete.
• optionStyles -- a style object for every item in the recommendation list.
• textStyles -- a style object for the textarea element.
• wrapperStyles -- a style object for the wrapper div.
• optionColor -- a string representing the color a hovered item will be colored.
• onSelect -- a function to be called when an item is selected.

Example:

<PText 

  options={[
    'Macao',
    'Macedonia, The Former Yugoslav Republic of',
    'Madagascar', 
    'Malawi',
    'Malaysia',
    'Maldives', 
    'Mali',
    'Malta',
    'Marshall Islands',
    'Martinique',
    'Mauritania', 
    'Mauritius',
    'Mayotte', 
    'Mexico',
    'Micronesia, Federated States of', 
    'Moldova, Republic of',
    'Monaco',
    'Mongolia',
    'Montserrat',
    'Morocco',
    'Mozambique',
    'Myanmar'
  ]} 

  onSelect={(country) => alert(country)}
  optionColor={'#95C8D8'}
  wrapperStyles={{
    padding: '20px'
  }}
/>