af-react-smart-select
v0.1.7
Published
Smart Select React Component
Downloads
28
Readme
AF-REACT-SMART-SELECT
Lightweight Select component built for React applications. Example.
Features:
- Typescript support
- Search option
- Grouping for option items
- Single or Multiple Select option with delete icon
- Implemented using styled-components
Props and Types
Data types, accepted by Component:
export type DataGroup = {
id: string | number;
label?: string;
items: SmartSelectDataItem[];
value?: never;
};
export type SmartSelectDataItem = {
label: string;
value: string | number;
id?: never;
items?: never;
};
| Name | Type | Default | | --------------------------------- | -------------------------------------- | ------------------- | | data | DataGroup[] OR SmartSelectDataItem[] | [] | | enableSearch? | boolean | false | | placeholder? | string | "Select value(s)" | | multiSelect? | boolean | false | | singleLineSelectedValues? | boolean | true | | singleLineSelectedValuesScroll? | boolean | true | | showDeselectAllButton? | boolean | false | | disabled? | boolean | false | | onChange? | (values: string[]) => void | () => void | | onOpen? | () => void | () => void | | onClose? | () => void | () => void |
Example:
import SmartSelect from "./SmartSelect";
export const Component= () => {
const data = [
{
id: 1,
label: "Group 1",
items: new Array(20).fill(null).map((_, idx) => ({
label: `Option 1_${idx + 1}`,
value: `option-1_${idx + 1}`,
})),
},
{
id: 2,
label: "Group 2",
items: new Array(20).fill(null).map((_, idx) => ({
label: `Option 2_${idx + 1}`,
value: `option-2_${idx + 1}`,
})),
},
];
return <SmartSelect data={data} />;
};