Typereact

Typereact is a simple React typeahead component that supports grouped entries.

Demo

You can find a demo here: https://visusnet.github.io/typereact/

Install

With npm:

npm i typereact

Or with yarn:

yarn add typereact

Usage

import Typeahead from 'typereact';

const handleBlur = (fieldName, value) => {
    console.log(`Field ${fieldName} set to ${value}.`)
};

<Typeahead options={options} onBlur={handleBlur} />

Configuration

Prop	Required	Default	Description
allowUnknownValue	false	false	If true, arbitrary values can be typed.
autoSelectSingleOption	false	false	If true, the component will automatically select an option if there are no other options available.
groups	false	undefined	If supplied, options will be grouped according to these groups.
id	false	undefined	Sets the HTML input ID.
isClearable	false	false	Renders a button that unsets the selected value if set to true.
isDisabled	false	false	If true, the component is disabled.
minTypedCharacters	false	undefined	If set, at least minTypedCharacters must be typed before the menu is rendered.
onBlur	false	no op	A callback that is called when focus is lost. Parameters: fieldName, value.
onChange	false	no op	A callback that is called when the value has changed. Parameters: fieldName, value.
options	false	[]	An array of label-value-pairs.
placeholder	false	''	Sets the HTML placeholder attribute.
renderEmptyGroups	false	false	If true, groups will be rendered even if they don't have any options. Works only in conjunction with groups.
tabIndex	false	``undefined```	If set, this prop is passed down to the input field.
value	false	undefined	If set, selects the option with the specified value.

Options

options must be an array with objects containing a label (string) and a value (can have any type), e.g.

{
  label: 'This will be shown',
  value: 'this is the value'
}

Groups

If you want your options to be grouped, you can set the groups prop which has the same structure as the options prop. In order to assign options to a group, you have to add an additional group property (of any type that matches the type of the group's value) to the options.

Example:

const options = [
    {label: 'First option in Group 1', value: 'firstOfGroup1', group: 'group1'},
    {label: 'Second option in Group 1', value: 'secondOfGroup1', group: 'group1'},
    {label: 'First option in Group 2', value: 'firstOfGroup2', group: 'group2'},
    {label: 'Second option in Group 2', value: 'secondOfGroup2', group: 'group2'}
];

const groups = [
    {label: 'Group 1', value: 'group1'},
    {label: 'Group 2', value: 'group2'}
];

Styling

You can apply your own styling or use the example that is used by the demo page.

License

MIT