https://github.com/appgeist/react-select-material-ui
An outlined Material-UI input component based on react-select, inspired by the Autocomplete section in Material-UI docs
https://github.com/appgeist/react-select-material-ui
autocomplete autocompletion material-design material-ui react react-select ui-component
Last synced: 21 days ago
JSON representation
An outlined Material-UI input component based on react-select, inspired by the Autocomplete section in Material-UI docs
- Host: GitHub
- URL: https://github.com/appgeist/react-select-material-ui
- Owner: appgeist
- License: isc
- Created: 2019-08-03T21:22:07.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-04T05:55:51.000Z (over 2 years ago)
- Last Synced: 2025-05-31T09:49:32.682Z (about 1 month ago)
- Topics: autocomplete, autocompletion, material-design, material-ui, react, react-select, ui-component
- Language: JavaScript
- Size: 612 KB
- Stars: 14
- Watchers: 0
- Forks: 4
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @appgeist/react-select-material-ui
[![NPM version][npm-image]][npm-url]
[![License][license-image]][license-url]
An outlined [Material-UI](https://material-ui.com) input component based on [react-select](https://react-select.com/home), inspired by the [Autocomplete section in Material-UI docs](https://material-ui.com/components/autocomplete).
Supports [react-select/async](https://react-select.com/async) and [react-select/creatable](https://react-select.com/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:
);
};
```
## 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](https://react-select.com/props).
## Async/creatable select
- Providing an `{ isAsync: true }` prop a will generate an [async](https://react-select.com/async) select;
- Providing an `{ isCreatable: true }` prop a will generate a [creatable](https://react-select.com/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](https://react-select.com/components) in a `components` property like so:
```js
const Option = props => {
// custom Option implementation
};
const ClearIndicator = props => {
// custom ClearIndicator implementation
};
return (
);
```
## Peer dependencies
- react (> 16.9);
- prop-types;
- clsx;
- @material-ui/core;
- @material-ui/styles.
## License
The [ISC License](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