react-searchable-select-mui · !travis build !npm version

A simple custom select component including a searchfield.

Here is a Demo:https://dccs-it-business-solutions.github.io/react-searchable-select-mui/

Installation

You should install react-searchable-select-mui with npm or yarn:

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


Remove Selection
Option 1
Option 2
Option X



`

All Material UI-Select Props get passed to the Select Component 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 (
label="Searchable Select"
value={value}
onChange={handleChange}
options={[
{ id: 1, value: "Entry 1" },
{ id: 2, value: "Entry 2" },
{ id: 3, value: "Entry 3" }
]}
/>
);
};
`

With Custom Prop Names

`javascript
label="Searchable Select"
value={value}
onChange={handleChange}
options={[
{ name: 1, property: "Entry 1" },
{ name: 2, property: "Entry 2" },
{ name: 3, property: "Entry 3" }
]}
keyPropFn={(option: any) => option.name}
valuePropFn={(option: any) => option.property}
/>
``

Contributing

$3

@dccs/react-searchable-select-mui is MIT licensed