inaipi-multiselect

A lightweight, customizable multi-select component for React applications with createable options.

Installation

npm install inaipi-multiselect --legacy-peer-deps

Basic Usage

import { CreatableCustom } from 'inaipi-multiselect';

const App = () => {
  const [selectedValues, setSelectedValues] = useState([]);
  const options = [
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' }
  ];

  return (
    <CreatableCustom
      isMulti
      options={options}
      onChange={setSelectedValues}
    />
  );
};

Key Features

• Multi-select with tags

• Create new options on the fly

• Customizable styling

• Keyboard navigation

• Controlled & uncontrolled modes

• Custom component overrides

Component Props

• isMulti

• options

• value

• defaultValue

• onChange

• components

• className

• classNamePrefix

• width

• height

• fontSize

• fontWeight

• inputBoxBorder

• autoFocus

Examples

 <CreatableCustom
        autoFocus
        defaultValue={[{ label: "[email protected]", value: "test" }]}
        // value={cc}
        isMulti  
        name="emails"
        options={availableEmails} // Pass only unselected emails
        // components={{ MenuList }}
        className="basic-multi-select"
        classNamePrefix="select"
        onChange={setCc}
        height="20px"
        width="600px"
        onClick={() => console.log("Input wrapper clicked!")}
        // fontSize="small"
        // fontWeight=""
        // inputBoxBorder={false}
      />

Controlled vs Uncontrolled

Using value (Controlled)

// Parent component manages state
const [values, setValues] = useState([]);

<CreatableCustom
  value={values}
  onChange={setValues}
  isMulti
  options={options}
/>

Using defaultValue (Uncontrolled)

// Component manages its own state
<CreatableCustom
  defaultValue={[{ label: '[email protected]', value: 'test' }]}
  isMulti
  options={options}
/>

Custom Components

Override default components using the components prop:

const CustomMenuList = ({ options, getOptionProps }) => (
  <div className="custom-menu">
    {options.map((option, index) => (
      <div
        {...getOptionProps({ option, index })}
        key={option.value}
        className="custom-option"
      >
        🟢 {option.label}
      </div>
    ))}
  </div>
);

<CreatableCustom
  components={{ MenuList: CustomMenuList }}
  // other props
/>

Advanced Usage

With Styled Components

<CreatableCustom
  isMulti
  options={emailOptions}
  classNamePrefix="email-select"
  width="600px"
  height="40px"
  fontSize="16px"
  inputBoxBorder={false}
  components={{ MenuList }}
  onChange={(selected) => console.log('Selected:', selected)}
/>

Creating New Options

<CreatableCustom
  isMulti
  options={[]} // No predefined options
  onChange={handleCreate}
  placeholder="Type and press Enter to create..."
/>

MIT©[Prabhu prasad Mishra]

Inaipi App