@sarthak100/react-multi-select-search v1.0.1

Multi-Select Search Component

Introduction

The Multi-Select Search Component is a versatile React component designed to handle search functionality with multi-select capabilities. This component allows users to search through a list of items, select multiple items, and manage their selections with a highly customizable interface. It supports various states such as loading, error handling, and empty states, making it suitable for a wide range of applications.

Installation

To install the Multi-Select Search Component, you can use npm or yarn:

npm install @sarthak100/react-multi-select-search

or

yarn add @sarthak100/react-multi-select-search

Usage

Here is a basic example of how to use the Multi-Select Search Component in your React application:

import React, { useState } from 'react';
import Search, { SearchSize } from '@sarthak100/react-multi-select-search';

const App: React.FC = () => {
  const [data, setData] = useState<string[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<string>('');
  const [chips, setChips] = useState<string[]>([]);

  const fetchData = async (query: string) => {
    setLoading(true);
    try {
      // Fetch data based on query
      // Example: const response = await fetch(`/api/search?q=${query}`);
      // const result = await response.json();
      // setData(result);
    } catch (err) {
      setError('Failed to fetch data');
    } finally {
      setLoading(false);
    }
  };

  return (
    <Search
      data={data}
      loading={loading}
      error={error}
      onQueryChange={fetchData}
      onChipsChange={setChips}
      placeholder="Search for items..."
      size={SearchSize.Medium}
      preSelectedChips={chips}
      isPreSelectedChipsRemovable={true}
    />
  );
};

export default App;

Props Description

License

This package is licensed under the MIT License. See the LICENSE file for more information.