React Mui Multi Select

Simple and lightweight multiple select dropdown component with search function using Material-UI.

Documentation

Installation

yarn react-mui-multi-select

or

npm install --save react-mui-multi-select

Usage

import { useState } from "react";
import { MultiSelect } from "react-mui-multi-select";

export interface MultiSelectEntity {
  count: number;
  entries: Entry[];
}

type Entry = {
  API: string;
  Description: string;
  Auth: string;
  HTTPS: boolean;
  Cors: string;
  Link: string;
  Category: string;
};

interface MultiSelectWidgetProps {
  data?: MultiSelectEntity;
  error?: string;
}

export function MultiSelectWidget({ data, error }: MultiSelectWidgetProps) {
  const entries = data?.entries;

  const [value, setValue] = useState<Entry[]>([]);
  const onChange = (e: Entry[]) => {
    console.log("selected:", e);
    setValue(e);
  };

  return (
    <div>
      {entries && (
        <MultiSelect
          getOptionKey={(u: Entry) => u.Link}
          getOptionLabel={(u: Entry) => u.API}
          value={value}
          options={entries}
          label="Multi Select"
          placeholder="Braveheart"
          onChange={onChange}
        />
      )}
      {error && <div style={{color: "red"}}>{error}</div>}
    </div>
  );
}