Skip to content

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

License

Notifications You must be signed in to change notification settings

appgeist/react-select-material-ui

Repository files navigation

@appgeist/react-select-material-ui

NPM version License

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

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>
  );
};

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:

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
    }}
  />
);

Peer dependencies

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

License

The ISC License.

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published