drop-search

A lightweight, searchable dropdown component for React supporting single-select, multi-select, and checkbox modes. Highly customizable with CSS variables and sub-component targeting.

Installation

npm install drop-search

Usage

Basic React Example

import { DropSearch } from 'drop-search';
import 'drop-search/dist/index.css';

const countries = [
  { label: 'Ghana', value: 'GH' },
  { label: 'United Kingdom', value: 'UK' },
];

function App() {
  return (
    <DropSearch 
      data={countries} 
      mode="multi" 
      onSelect={(selected) => console.log(selected)} 
    />
  );
}

Next.js Usage

drop-search is fully compatible with Next.js (App Router and Pages Router).

App Router (Server Components)

Since drop-search uses React hooks, it is marked with "use client". You can import it directly into your Server Components:

// app/page.tsx
import { DropSearch } from 'drop-search';
import 'drop-search/dist/index.css';

export default function Page() {
  const data = [{ label: 'Option 1', value: 1 }];
  
  return (
    <main>
      <h1>My Next.js App</h1>
      <DropSearch data={data} />
    </main>
  );
}

Styling in Next.js

Ensure you import the CSS in your layout.tsx or _app.tsx for global availability, or locally in your component as shown above.

Customization

drop-search is designed to be easily themed.

1. Using CSS Variables

You can override the default theme by setting these variables in your global CSS:

:root {
  --drop-search-primary: #10b981; /* Emerald */
  --drop-search-radius: 0px;      /* Square corners */
  --drop-search-bg: #f3f4f6;
}

2. Using classNames Prop

Target specific parts of the component for custom styling:

<DropSearch
  data={data}
  classNames={{
    trigger: 'my-custom-trigger-class',
    item: 'hover:bg-green-100',
    panel: 'shadow-2xl'
  }}
/>

Available classNames keys: container, trigger, selection, placeholder, badge, badgeRemove, panel, searchArea, input, list, item, checkbox, empty.

3. Using style Prop

Pass an inline style object to the main container:

<DropSearch data={data} style={{ maxWidth: '400px' }} />

Props

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | data | Option[] | [] | Array of { label: string, value: any } | | mode | 'single' \| 'multi' \| 'checkbox' | 'single' | Selection mode | | placeholder | string | 'Search...' | Placeholder text | | onSelect | (value: any) => void | - | Callback when selection changes | | className | string | '' | Additional class for container | | classNames | object | {} | Classes for sub-components | | style | React.CSSProperties | - | Inline styles for container |

License

MIT © Felix Kwamena Awortwe