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.
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 ( <Fragment> <h1>Fictional places:</h1> <Select id="place" label="Kingdom" placeholder="Select a kingdom" options={KINGDOMS} value={kingdom} onChange={setKingdom} isClearable helperText="Where would you like to live?" /> </Fragment> ); };- 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.
- Providing an
{ isAsync: true }prop a will generate an async select; - Providing an
{ isCreatable: true }prop a will generate a creatable select; isAsyncandisCreatablecan be combined.
You can augment the layout and functionality by providing custom react-select components in a components property like so:
const Option = props => { // custom Option implementation }; const ClearIndicator = props => { // custom ClearIndicator implementation }; return ( <Select 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 }} /> );- react (> 16.9);
- prop-types;
- clsx;
- @material-ui/core;
- @material-ui/styles.
The ISC License.