- Notifications
You must be signed in to change notification settings - Fork4
An outlined Material-UI input component based on react-select, inspired by the Autocomplete section in Material-UI docs
License
NotificationsYou must be signed in to change notification settings
appgeist/react-select-material-ui
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
An outlinedMaterial-UI input component based onreact-select, inspired by theAutocomplete section in Material-UI docs.
Supportsreact-select/async andreact-select/creatable.
importReact,{Fragment,useState}from"react";importSelectfrom"@appgeist/react-select-material-ui";constKINGDOMS=[{value:"AS",label:"Astur"},{value:"FA",label:"Fargos"},{value:"LE",label:"Laeden"},{value:"TH",label:"Therras"},{value:"VE",label:"Vessar"}];exportdefault()=>{const[kingdom,setKingdom]=useState(null);return(<Fragment><h1>Fictional places:</h1><Selectid="place"label="Kingdom"placeholder="Select a kingdom"options={KINGDOMS}value={kingdom}onChange={setKingdom}isClearablehelperText="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 - seethe API docs.
- Providing an
{ isAsync: true }prop a will generate anasync select; - Providing an
{ isCreatable: true }prop a will generate acreatable select; isAsyncandisCreatablecan be combined.
You can augment the layout and functionality by providingcustom react-select components in acomponents property like so:
constOption=props=>{// custom Option implementation};constClearIndicator=props=>{// custom ClearIndicator implementation};return(<Selectid="place"label="Kingdom"placeholder="Select a kingdom"options={KINGDOMS}value={kingdom}onChange={setKingdom}isClearablehelperText="Where would you like to live?"components={{ Option, ClearIndicator}}/>);
- react (> 16.9);
- prop-types;
- clsx;
- @material-ui/core;
- @material-ui/styles.
TheISC License.
About
An outlined Material-UI input component based on react-select, inspired by the Autocomplete section in Material-UI docs
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
No releases published
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.
Contributors2
Uh oh!
There was an error while loading.Please reload this page.