@appgeist/react-select-material-ui

[![NPM version][npm-image]][npm-url]
[![License][license-image]][license-url]

!AppGeist React-Select-Material-UI

An outlined Material-UI input component based on react-select, inspired by the Autocomplete section in Material-UI docs.

Supports react-select/async and react-select/creatable.

Usage

``js
import React, { Fragment, useState } from "react";
import Select from "@appgeist/react-select-material-ui";

const KINGDOMS = [
{ value: "AS", label: "Astur" },
{ value: "FA", label: "Fargos" },
{ value: "LE", label: "Laeden" },
{ value: "TH", label: "Therras" },
{ value: "VE", label: "Vessar" }
];

export default () => {
const [kingdom, setKingdom] = useState(null);

return (



Fictional places:


id="place"
label="Kingdom"
placeholder="Select a kingdom"
options={KINGDOMS}
value={kingdom}
onChange={setKingdom}
isClearable
helperText="Where would you like to live?"
/>

);
};
`

Component props

- id (string);
- label (string);
- margin (string, one of 'none', 'normal' or 'dense')
- error (string);
- helperText (string);
- isAsync (bool);
- isCreatable (bool);
- all other props are forwarded to react-select component - see the API docs.

Async/creatable select

- Providing an { isAsync: true } prop a will generate an async select;
- Providing an { isCreatable: true } prop a will generate a creatable select;
- isAsync and isCreatable can be combined.

Replacing react-select components

You can augment the layout and functionality by providing custom react-select components in a components property like so:

`js
const Option = props => {
// custom Option implementation
};

const ClearIndicator = props => {
// custom ClearIndicator implementation
};

return (
id="place"
label="Kingdom"
placeholder="Select a kingdom"
options={KINGDOMS}
value={kingdom}
onChange={setKingdom}
isClearable
helperText="Where would you like to live?"
components={{
Option,
ClearIndicator
}}
/>
);
``

Peer dependencies

- react (> 16.9);
- prop-types;
- clsx;
- @material-ui/core;
- @material-ui/styles.

License

The ISC License.

[npm-image]: https://img.shields.io/npm/v/@appgeist/react-select-material-ui.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/@appgeist/react-select-material-ui
[license-image]: https://img.shields.io/npm/l/@appgeist/react-select-material-ui.svg?style=flat-square
[license-url]: LICENSE