Amaka202 / mui-chip-select

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

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.