react-multis v1.0.10

react-multis

A lightweight, customizable multi-select component for web applications. Easy to integrate, responsive,Dark mood, and supports user interactions with customizable responses.

🎉🎉 Features

• Simple setup and usage.
• Customizable styles and behavior.
• Built-in support for user interactions and responses.
• Lightweight with minimal dependencies.
• Easily customizable via props.
• Typescript support
• Small bundle size

Example

1. Installation

npm install react-multis

yarn add react-multis

pnpm add react-multis

2. Live Demo

React-multi

3. Simple usage

import React, { useState } from "react";
import { MultiSelect, Options } from "react-multis";

const App = () => {
  const options = [
    { value: "chocolate", label: "Chocolate" },
    { value: "strawberry", label: "Strawberry" },
    { value: "vanilla", label: "Vanilla" },
    { value: "strawberryss", label: "Strawberry" },
  ];
  const handleSelect = (selectedValue: Options[]) => {
    console.log(selectedValue);
  };

  return <MultiSelect options={options} onChange={handleSelect} />;
};

export default App;

3.1 With Props usage

import React, { useState } from "react";
import { MultiSelect, Options } from "react-multis";

const App = () => {
   const options = [
    { value: "chocolate", label: "Chocolate" },
    { value: "strawberry", label: "Strawberry" },
    { value: "vanilla", label: "Vanilla" },
    { value: "strawberryss", label: "Strawberry" },
  ];
   const handleSelect = (selectedValue: Options[]) => {
    console.log(selectedValue);
  };

  return (
    <MultiSelect
      isSearchable
      options={options}
      onChange={handleSelect}
      creatable
      placeholderText="Select an item"
      size="sm"
      maxLengthShow={2}
      width={400}
      maxHeight={300}
  );
};

export default App;

Read Documentation

React-multi

Props

This documentation helps developers understand the props they can use, along with their types and defaults, including how to apply custom styles through customClass.