$ npm install @zippytech/react-toolkit --save
$ yarn add @zippytech/react-toolkit
<ComboBox />component, all you need to import is
React, the code and the styles of the component itself:
<ComboBox />. In the following sections we'll explore how to use the
<ComboBox />in various scenarios, supported props, theming, using a local/remote
<ComboBox />does not collapse the list when a value is selected. Specify
collapseOnSelect=trueto collapse the list on selection. Using
collapseOnSelect=falsewill only collapse the list when the user hits
Enterto select a list item (but won't collapse on selection via mouse click).
HTMLElement- you can do that using the
constrainToprop, as shown below:
constrainTocan be a
StringCSS selector, an
Functionthat is called with the DOM node of the
ComboBoxas the first argument.
StringCSS selector is specified, the list is constrained to the first matching parent.
<ComboBox />list is smartly positioned to the top or to the bottom depending on the constrain region and the available space.
<ComboBox />can be configured to behave like an autocomplete input. See the example below and the Autocomplete page for more details.
<ComboBox />can be configured to behave like a dropdown (very similar to the html select element). See the example below and the Dropdown page for more details.
<ComboBox />, but the most important scenarios have been shown above. See the example below to configure other props you might find useful.