mui-chip-select

A React component that helps you display selectable options with MUI chip.

Installation:

npm install mui-chip-select

or

yarn add mui-chip-select

Usage:

Add MuiChipSelect to your component like this:

import React, { useState } from 'react';
import { MuiChipSelect } from 'mui-chip-select';

function App() {

  const [selectedOptions, setSelectedOptions] = useState([]);

  function handleSelectionChange(newSelection: any) {
    setSelectedOptions(newSelection);
  }

  const customChipProps = {
    sx: {
      backgroundColor: 'orange'
    },
  };

  const options = ['Mango', 'Orange', 'Carrot']

  return (
    <div className="App">
        <p>Please select all that applies</>
        <MuiChipSelect options={options} onChange={handleSelectionChange} chipProps={customChipProps }/>
    </div>
  );
}

export default App;

Options can also be an array of objects:

  const options = [
    {
      label: "Mango",
      value: 'd5b3dd96-6657-4e3f-82d1-1046d61c2f99'
    },
    {
      label: "Orange",
      value: '7ab12239-4b03-4898-bfed-a3de7d7e8c95'
    },
    {
      label: "Carrot",
      value: '0e822307-2054-4a4d-ad0f-18a652d5b3df'
    }
  ];

Props

Common props you may want to specify include:

| Name | Type | Required | Description | | --------- | ----------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | | options | Array of strings or objects | Yes | An array of options to be displayed as chips. Can be either an array of strings or an array of objects with label and value properties.. | | onChange | (selected: Option[]) => void | Yes | A callback function that gets triggered when an option is selected or unselected. The function receives an array of selected options as an argument | | chipProps | React.ComponentProps<typeof Chip> | No | Props to be passed to the Chip component.Can be used to customize the appearance and behavior of the chip container. | | className | string | No | A class name to be added to the Chip wrapper.Can be used to add custom CSS styles to the container. |

License

MIT Licensed. Copyright (c) Chiamaka Umeh 2023.