ComboSearchBar

ComboSearchBar is a flexible and customizable search bar component for React applications. It allows you to easily implement a search feature with additional filter badges and dropdown options to refine the search criteria.

Features

• Customizable input placeholder text.
• Supports adding and removing filter badges.
• Numeric filters with operations like greater than, less than, and between.
• Optional dropdown content for advanced filtering.
• Easy integration with your existing React project.

Installation

Install ComboSearchBar with npm:

npm install combo-search-bar

Usage

Here's how you can use ComboSearchBar in your project:

import React from 'react';
import ComboSearchBar from 'combo-search-bar';

const App = () => {
  const handleSearch = (filters) => {
    console.log(filters);
  };

  // Define your filters configuration here
  const filtersConfig = {
    // ...
  };

  return (
    <ComboSearchBar
      filtersConfig={filtersConfig}
      onSearch={handleSearch}
    />
  );
};

export default App;

Props

ComboSearchBar accepts the following props:

• filtersConfig: Object defining the configuration for filters.
• onSearch: Function called when a search is performed.
• setFilters: Function called when filters are set (optional).
• RenderFilterBadge: Component for rendering filter badges.
• RenderOptionsDropdown: Component for rendering the options dropdown.
• RenderDropdownContent: Component for rendering the content of the dropdown.
• SearchIcon: Custom search icon.
• placeholderText: Placeholder text for the search input.