Skip to content

DCCS-IT-Business-Solutions/react-searchable-select-mui

Repository files navigation

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:

<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 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)
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

About

A simple custom select component including a searchfield.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published