# typereact > [![CircleCI](https://circleci.com/gh/visusnet/typereact.svg?style=shield&circle-token=80ba425931ad61cde5a4ad991aea29aa65c51a30)](https://circleci.com/gh/visusnet/typereact) [![Travis](https://travis-ci.org/visusnet/typereact.svg?branch=master)](https://tr Latest version **1.5.0** (published 2018-11-19) · MIT license · 0 weekly downloads ## Install ```sh npm install typereact pnpm add typereact yarn add typereact bun add typereact ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned. ## Facts | | | |---|---| | Version | 1.5.0 | | Published | 2018-11-19 | | First published | 2017-12-12 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 6 | | Unpacked size | 1.4 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 5 | | Author | Alexander Müller | | Maintainers | visusnet | ## Links - npm: https://www.npmjs.com/package/typereact - Repository: https://github.com/visusnet/typereact - Homepage: https://github.com/visusnet/typereact#readme - Issues: https://github.com/visusnet/typereact/issues - npm.io page: https://npm.io/package/typereact ## Dependencies (6) - [react](https://npm.io/package/react.md) 16.6.3 - [react-dom](https://npm.io/package/react-dom.md) 16.6.3 - [prop-types](https://npm.io/package/prop-types.md) ^15.6.0 - [memoize-one](https://npm.io/package/memoize-one.md) ^4.0.0 - [react-virtualized](https://npm.io/package/react-virtualized.md) ^9.20.1 - [dom-scroll-into-view](https://npm.io/package/dom-scroll-into-view.md) ^1.2.1 ## Recent versions - 1.5.0 (latest) — 2018-11-19 - 1.4.3 — 2018-11-19 - 1.4.2 — 2018-09-07 - 1.4.1 — 2018-09-06 - 1.3.0 — 2018-07-30 - 1.2.4 — 2018-07-30 - 1.2.3 — 2018-07-26 - 1.2.2 — 2018-07-26 - 1.2.1 — 2018-07-25 - 1.2.0 — 2018-07-23 - 1.1.0 — 2018-07-17 - 1.0.17 — 2018-07-06 - 1.0.16 — 2018-06-19 - 1.0.15 — 2018-06-19 - 1.0.14 — 2018-06-19 - … 14 more at https://npm.io/package/typereact/versions ## README # Typereact [![CircleCI](https://circleci.com/gh/visusnet/typereact.svg?style=shield&circle-token=80ba425931ad61cde5a4ad991aea29aa65c51a30)](https://circleci.com/gh/visusnet/typereact) [![Travis](https://travis-ci.org/visusnet/typereact.svg?branch=master)](https://travis-ci.org/visusnet/typereact) [![npm version](https://badge.fury.io/js/typereact.svg)](https://badge.fury.io/js/typereact) [![Coverage Status](https://coveralls.io/repos/github/visusnet/typereact/badge.svg?branch=master)](https://coveralls.io/github/visusnet/typereact?branch=master) [![Greenkeeper badge](https://badges.greenkeeper.io/visusnet/typereact.svg)](https://greenkeeper.io/) Typereact is a simple React typeahead component that supports grouped entries. ![Typeahead example](/.github/typeahead.gif) ## Demo You can find a demo here: https://visusnet.github.io/typereact/ ## Install With npm: ```bash npm i typereact ``` Or with yarn: ```bash yarn add typereact ``` ## Usage ````javascript import Typeahead from 'typereact'; const handleBlur = (fieldName, value) => { console.log(`Field ${fieldName} set to ${value}.`) }; ```` ## 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. ```javascript { 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: ```javascript 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](https://github.com/visusnet/typereact/blob/gh-pages-source/src/Typeahead.scss) that is used by the demo page. ## License MIT --- _Source: https://npm.io/package/typereact · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._