@appgeist/react-select-material-ui

    1.4.3 • Public • Published

    @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.

    Install

    npm i @appgeist/react-select-material-ui

    DownloadsWeekly Downloads

    97

    Version

    1.4.3

    License

    ISC

    Unpacked Size

    72.1 kB

    Total Files

    34

    Last publish

    Collaborators

    • icflorescu