react-searchable-select-mui ·

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

renders the following simplified structure:

<FormControl>
  <InputLabel>Label</InputLabel>
  <Select>
    <TextField />
    <MenuItem>Remove Selection</MenuItem>
    <MenuItem>Option 1</MenuItem>
    <MenuItem>Option 2</MenuItem>
    <MenuItem>Option X</MenuItem>
  </Select>
  <FormHelperText />
</FormControl>

All Material UI-Select Props get passed to the Component https://material-ui.com/api/select/ Material UI-Select native is not supported!!!! 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[] any[]` keyPropFn `(option:KeyValuePair any)=>any` valuePropFn `(option:KeyValuePair any)=>any` 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 const Example = () => { const [value, setValue] = React.useState<unknown>(); const handleChange = ( event: React.ChangeEvent<{ name?: string; value: unknown }> ) => { setValue(event.target.value); }; return ( <SearchableSelect 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 <SearchableSelect 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 License @dccs/react-searchable-select-mui is MIT licensed