@madulinux/react-select NPM

@madulinux/react-select

Reusable Select2/AsyncSelect React component with search, async options, cascade support, and full custom styling. Perfect for dynamic dropdowns, region selection, and DataTable filtering.

Dokumentasi Indonesia

✨ Features

Async fetch & search (searchable)
Cascade/multi-level dropdown support
Custom option rendering
Multi/single select
Clear/reset button
Easy integration with DataTable/filter
TypeScript support
Full styling control via className props

🚀 Installation

npm install @madulinux/react-select

🔥 Basic Usage

import Select2 from '@madulinux/react-select';

const [selected, setSelected] = useState(null);

<Select2
  value={selected}
  onChange={setSelected}
  fetchOptions={async ({ search }) => {
    const res = await fetch('/api/options?search=' + search);
    const data = await res.json();
    return { data: data.items, hasMore: false };
  }}
  placeholder="Select something"
/>

🧩 API & Props

Prop	Type	Description
value	object/array/null	Selected value (single/multi)
onChange	function	Change handler
fetchOptions	function ({search}) => Promise<{data,hasMore}>	Async fetch for options
placeholder	string	Input placeholder
label	string	Input label
disabled	boolean	Disable input
renderOption	function (item) => ReactNode	Custom option rendering
isMulti	boolean	Enable multi select
className	string	Styling root container
inputClassName	string	Styling input box
dropdownClassName	string	Styling dropdown menu
optionClassName	string	Styling each option item
selectedOptionClassName	string	Styling selected option item
loadingClassName	string	Styling loading text
noDataClassName	string	Styling "no data" text

🎨 Custom Styling

You can fully customize the appearance using className props:

<Select2
  value={selected}
  onChange={setSelected}
  fetchOptions={fetchOptions}
  className="mb-4"
  inputClassName="border-gray-300 rounded focus:border-blue-500"
  dropdownClassName="shadow-lg border bg-white"
  optionClassName="px-4 py-2 hover:bg-blue-50 cursor-pointer"
  selectedOptionClassName="bg-blue-100 font-bold"
  loadingClassName="text-blue-500"
  noDataClassName="text-gray-400 italic"
/>