├── .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 | ![AppGeist React-Select-Material-UI](https://user-images.githubusercontent.com/581999/62422816-16dc7200-b6c1-11e9-940d-3638c26bdf93.png) 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 | 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