├── .babelrc.js
├── .eslintignore
├── .eslintrc.json
├── .gitignore
├── LICENSE
├── README.md
├── index.d.ts
├── package.json
├── src
├── ClearIndicator.js
├── Control.js
├── DropdownIndicator.js
├── IndicatorSeparator.js
├── InputComponent.js
├── Menu.js
├── MultiValue.js
├── NoOptionsMessage.js
├── Option.js
├── Placeholder.js
├── Select.js
├── SingleValue.js
├── ValueContainer.js
└── index.js
└── yarn.lock
/.babelrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: ['@babel/preset-env', '@babel/preset-react']
3 | };
4 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | dist
2 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@appgeist/eslint-config-react"
3 | }
4 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | dist
4 | *.log
5 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | ISC License
2 |
3 | Copyright (c) 2019, Ionut-Cristian Florescu & contributors
4 |
5 | Permission to use, copy, modify, and/or distribute this software for any
6 | purpose with or without fee is hereby granted, provided that the above
7 | copyright notice and this permission notice appear in all copies.
8 |
9 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
10 | WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
11 | MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
12 | ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
13 | WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
14 | ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
15 | OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
16 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # @appgeist/react-select-material-ui
2 |
3 | [![NPM version][npm-image]][npm-url]
4 | [![License][license-image]][license-url]
5 |
6 | 
7 |
8 | 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).
9 |
10 | Supports [react-select/async](https://react-select.com/async) and [react-select/creatable](https://react-select.com/creatable).
11 |
12 | ## Usage
13 |
14 | ```js
15 | import React, { Fragment, useState } from "react";
16 | import Select from "@appgeist/react-select-material-ui";
17 |
18 | const KINGDOMS = [
19 | { value: "AS", label: "Astur" },
20 | { value: "FA", label: "Fargos" },
21 | { value: "LE", label: "Laeden" },
22 | { value: "TH", label: "Therras" },
23 | { value: "VE", label: "Vessar" }
24 | ];
25 |
26 | export default () => {
27 | const [kingdom, setKingdom] = useState(null);
28 |
29 | return (
30 |
31 | Fictional places:
32 |
42 |
43 | );
44 | };
45 | ```
46 |
47 | ## Component props
48 |
49 | - id (string);
50 | - label (string);
51 | - margin (string, one of 'none', 'normal' or 'dense')
52 | - error (string);
53 | - helperText (string);
54 | - isAsync (bool);
55 | - isCreatable (bool);
56 | - all other props are forwarded to react-select component - see [the API docs](https://react-select.com/props).
57 |
58 | ## Async/creatable select
59 |
60 | - Providing an `{ isAsync: true }` prop a will generate an [async](https://react-select.com/async) select;
61 | - Providing an `{ isCreatable: true }` prop a will generate a [creatable](https://react-select.com/creatable) select;
62 | - `isAsync` and `isCreatable` can be combined.
63 |
64 | ## Replacing react-select components
65 |
66 | You can augment the layout and functionality by providing [custom react-select components](https://react-select.com/components) in a `components` property like so:
67 |
68 | ```js
69 | const Option = props => {
70 | // custom Option implementation
71 | };
72 |
73 | const ClearIndicator = props => {
74 | // custom ClearIndicator implementation
75 | };
76 |
77 | return (
78 |
92 | );
93 | ```
94 |
95 | ## Peer dependencies
96 |
97 | - react (> 16.9);
98 | - prop-types;
99 | - clsx;
100 | - @material-ui/core;
101 | - @material-ui/styles.
102 |
103 | ## License
104 |
105 | The [ISC License](LICENSE).
106 |
107 | [npm-image]: https://img.shields.io/npm/v/@appgeist/react-select-material-ui.svg?style=flat-square
108 | [npm-url]: https://www.npmjs.com/package/@appgeist/react-select-material-ui
109 | [license-image]: https://img.shields.io/npm/l/@appgeist/react-select-material-ui.svg?style=flat-square
110 | [license-url]: LICENSE
111 |
--------------------------------------------------------------------------------
/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Props as ReactSelectProps } from 'react-select/base';
3 | import { Props as AsyncReactSelectProps } from 'react-select/async';
4 | import { Props as CreatableReactSelectProps } from 'react-select/creatable';
5 |
6 | type BaseProps = ReactSelectProps &
7 | AsyncReactSelectProps &
8 | CreatableReactSelectProps;
9 |
10 | export interface SelectProps extends React.Props