AsyncCreatableSelectInput

Description

An input component getting a selection from an asynchronously loaded list from the user, and where options can be created by the user.

Installation

yarn add @commercetools-uikit/async-creatable-select-input

npm --save install @commercetools-uikit/async-creatable-select-input

Additionally install the peer dependencies (if not present)

yarn add react react-dom react-intl

npm --save install react react-dom react-intl

Usage

import React from 'react';
import PropTypes from 'prop-types';
import AsyncCreatableSelectInput from '@commercetools-uikit/async-creatable-select-input';

const Example = (props) => (
  <AsyncCreatableSelectInput
    name="form-field-name"
    value={props.value}
    onChange={
      (/** event */) => {
        // console.log(event)
      }
    }
    options={[
      { value: 'one', label: 'One' },
      { value: 'two', label: 'Two' },
    ]}
  />
);

Example.propTypes = {
  value: PropTypes.string,
};

export default Example;

Properties

This input is built on top of react-select v2. It supports mostly same properties as react-select. Behaviour for some props was changed, and support for others was dropped.

In case you need one of the currently excluded props, feel free to open a PR adding them.

Static Properties

isTouched(touched)

Expects to be called with an array or boolean. Returns true when truthy.

Components

It is possible to customize SelectInput by passing the components property. SelectInput exports the default underlying components as static exports.

Components available as static exports are:

• ClearIndicator
• Control
• DropdownIndicator
• DownChevron
• CrossIcon
• Group
• GroupHeading
• IndicatorsContainer
• IndicatorSeparator
• Input
• LoadingIndicator
• Menu
• MenuList
• MenuPortal
• LoadingMessage
• NoOptionsMessage
• MultiValue
• MultiValueContainer
• MultiValueLabel
• MultiValueRemove
• Option
• Placeholder
• SelectContainer
• SingleValue
• ValueContainer

See the official documentation for more information about the props they receive.