THIS PROJECT IS NO LONGER MAINTAINED.

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.
calculateGroupHeight	false	59 or 28	A callback that returns the height of group entries in pixels. Parameters: group, index.
calculateListHeight	false	28 or min(300, number of options * 28)	A callback that returns the height of the menu in pixels. Parameters: rows, totalRowsHeight.
calculateOptionHeight	false	28	A callback that returns the height of option entries in pixels. Parameters: option, index.
estimateMenuWidth	false	undefined	Either a callback that returns the width the menu in pixels or a boolean value. Parameters: rows. If true, a default implementation is used that tries to estimate the menu width based on label length.
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.
menuWidth	false	undefined	A number that manually sets the width of the menu.
notFoundLabel	false	nicht gefunden (German)	A string that is displayed after the typed label for which no options could be found.
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