# @dccs/react-searchable-select-mui > Searchable Select MUI Latest version **0.2.11** (published 2019-10-30) · MIT license · 0 weekly downloads ## Install ```sh npm install @dccs/react-searchable-select-mui pnpm add @dccs/react-searchable-select-mui yarn add @dccs/react-searchable-select-mui bun add @dccs/react-searchable-select-mui ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned. ## Facts | | | |---|---| | Version | 0.2.11 | | Published | 2019-10-30 | | First published | 2019-09-23 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 1 | | Unpacked size | 4.3 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1 | | Author | Manuel Vitzthum | | Maintainers | dccsit | | Keywords | npm, yarn, node, react, javascript, typescript, materialUI, material-UI, material UI, materialUI, ui, search, searchable, form, dropdown, select, mui | ## Links - npm: https://www.npmjs.com/package/@dccs/react-searchable-select-mui - Repository: https://github.com/DCCS-IT-Business-Solutions/react-searchable-select-mui - Homepage: https://github.com/DCCS-IT-Business-Solutions/react-searchable-select-mui#readme - Issues: https://github.com/DCCS-IT-Business-Solutions/react-searchable-select-mui/issues - npm.io page: https://npm.io/package/@dccs/react-searchable-select-mui ## Dependencies (1) - [@dccs/utils](https://npm.io/package/@dccs/utils.md) 0.2.1 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.2.11 (latest) — 2019-10-30 - 0.2.10 — 2019-10-29 - 0.2.9 — 2019-10-24 - 0.2.7 — 2019-10-24 - 0.2.6 — 2019-10-23 - 0.2.5 — 2019-09-25 - 0.2.4 — 2019-09-25 - 0.2.3 — 2019-09-25 - 0.2.2 — 2019-09-25 - 0.2.1 — 2019-09-25 - 0.2.0 — 2019-09-24 - 0.1.0 — 2019-09-23 ## README # react-searchable-select-mui · ![travis build](https://img.shields.io/travis/DCCS-IT-Business-Solutions/react-searchable-select-mui.svg) ![npm version](https://img.shields.io/npm/v/@dccs/react-searchable-select-mui.svg) A simple custom select component including a searchfield. Here is a Demo:[https://dccs-it-business-solutions.github.io/react-searchable-select-mui/](https://dccs-it-business-solutions.github.io/react-searchable-select-mui/) ## Installation You should install [react-searchable-select-mui with npm or yarn](https://www.npmjs.com/package/@dccs/react-searchable-select-mui): npm install @dccs/react-searchable-select-mui or yarn add @dccs/react-searchable-select-mui This command will download and install react-searchable-select-mui Peer Dependencies: npm install @material-ui/core ## How it works SearchableSelect renders the following simplified structure: ```javascript Label ``` All Material UI-Select Props get passed to the Select Component [https://material-ui.com/api/select/](https://material-ui.com/api/select/) Native is not supported. Multiple is not supported yet. Additional Props: | Name | Type | Description | | ---------------------- | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | label | `string` | Label of the Select Component | | searchFieldPlaceholder | `string` | Gets passed to the placeholder property of . Default: "Search..." | | removeSelectionText | `string` | Text für the Remove Selection MenuItem. Default: "Remove selection" | | options | `KeyValuePair[] or any[]` | Options to render. By default it expects an array like this: [{key:1, value:"Entry 1"}, {key:2, value:"Entry 2"}]. | | keyPropFn | `(option:KeyValuePair or any)=>any` | Required function if you want to use a different property names for key and value. If you want to use id instead of key: keyPropFn={(option: any) => option.id} | | valuePropFn | `(option:KeyValuePair or any)=>any` | Required function if you want to use a different property names for key and value. If you want to use name instead of value: valuePropFn={(option: any) => option.name} | | formControlProps | https://material-ui.com/api/form-control/ | Props that get passed to the formcontrol component | | formHelperTextProps | https://material-ui.com/api/form-helper-text/ | Props that get passed to the FormHelperText component | | showAll | `boolean` | If true it shows all available options. Undefined or false shows 20 per default | | maxVisibleOptions | `number` | Set the number of visible options to show. (Choose number below 50 since MUI-MenuItems are very laggy) | ```javascript const Example = () => { const [value, setValue] = React.useState(); const handleChange = ( event: React.ChangeEvent<{ name?: string; value: unknown }> ) => { setValue(event.target.value); }; return ( ); }; ``` With Custom Prop Names ```javascript option.name} valuePropFn={(option: any) => option.property} /> ``` ## Contributing ### License @dccs/react-searchable-select-mui is [MIT licensed](https://github.com/facebook/react/blob/master/LICENSE) --- _Source: https://npm.io/package/@dccs/react-searchable-select-mui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._