npm package: @fazlerabbytalukder/flexi-select-react
Description: A flexible, customizable select component for React and Next.js with search, images, multi-select and full style control
Latest version: 1.0.1

# @fazlerabbytalukder/flexi-select-react

A lightweight React select component built on native `<select>` and `<optgroup>`.

## Installation

```bash
npm install @fazlerabbytalukder/flexi-select-react
```

## Quick start

```tsx
import { FlexiSelect } from '@fazlerabbytalukder/flexi-select-react';

const options = [
  { value: 'apple', label: 'Apple' },
  { value: 'banana', label: 'Banana' },
  { value: 'mango', label: 'Mango' },
];

export default function App() {
  return (
    <FlexiSelect
      options={options}
      placeholder="Choose a fruit"
      onChange={(value) => console.log(value)}
    />
  );
}
```

## Features

- Single select
- Multi select (`isMulti`)
- Grouped options (`optgroup`)
- Client-side search (`isSearchable`)
- Controlled and uncontrolled usage
- Clear button (`isClearable`)
- Custom option label/value/filter logic
- Basic style/className hooks

## Option and group shape

```ts
interface OptionType {
  value: string | number;
  label: string;
  disabled?: boolean;
  [key: string]: unknown;
}

interface GroupType {
  label: string;
  options: OptionType[];
}
```

## Supported props (currently implemented)

### Core

- `options: OptionType[] | GroupType[]` (required)
- `value?: SelectValue`
- `defaultValue?: SelectValue`
- `onChange?: (value: SelectValue) => void`

### Behavior

- `isMulti?: boolean`
- `isSearchable?: boolean`
- `isClearable?: boolean`
- `isDisabled?: boolean`
- `placeholder?: string`
- `searchPlaceholder?: string`

### Custom logic

- `filterOption?: (option, inputValue) => boolean`
- `getOptionLabel?: (option) => string`
- `getOptionValue?: (option) => string`

### Styling hooks in current component

- `className?: string`
- `classNames?.container`
- `classNames?.control`
- `classNames?.searchInput`
- `classNames?.clearIndicator`
- `styles?.container`
- `styles?.control`
- `styles?.searchInput`
- `styles?.clearIndicator`

### Form and accessibility

- `name?: string` (adds hidden input)
- `inputId?: string`
- `aria-label?: string`
- `aria-labelledby?: string`

## Controlled example

```tsx
import { useState } from 'react';
import { FlexiSelect, type SelectValue } from '@fazlerabbytalukder/flexi-select-react';

const options = [
  { value: 1, label: 'One' },
  { value: 2, label: 'Two' },
  { value: 3, label: 'Three' },
];

export default function ControlledDemo() {
  const [value, setValue] = useState<SelectValue>(null);

  return (
    <FlexiSelect
      options={options}
      value={value}
      onChange={setValue}
      isClearable
      isSearchable
    />
  );
}
```

## Multi-select example

```tsx
import { FlexiSelect } from '@fazlerabbytalukder/flexi-select-react';

const options = [
  { value: 'red', label: 'Red' },
  { value: 'green', label: 'Green' },
  { value: 'blue', label: 'Blue' },
];

export default function MultiDemo() {
  return <FlexiSelect options={options} isMulti isSearchable isClearable />;
}
```

## Grouped options example

```tsx
import { FlexiSelect } from '@fazlerabbytalukder/flexi-select-react';

const grouped = [
  {
    label: 'Fruits',
    options: [
      { value: 'apple', label: 'Apple' },
      { value: 'mango', label: 'Mango' },
    ],
  },
  {
    label: 'Vegetables',
    options: [
      { value: 'carrot', label: 'Carrot' },
      { value: 'spinach', label: 'Spinach' },
    ],
  },
];

export default function GroupedDemo() {
  return <FlexiSelect options={grouped} />;
}
```

## Notes

- This package currently uses native select rendering for reliability and simplicity.
- Some extra type fields exist for future expansion, but they are not all active in the current UI implementation.

## License

MIT