diff --git a/README.md b/README.md index 016b678..f18fa2b 100644 --- a/README.md +++ b/README.md @@ -56,21 +56,22 @@ export default Example; ## 👀 Props -| Prop | Description | Type | Default | -| --------------------- | ---------------------------------- | ------------------ | ------- | -| `labelledBy` | value for `aria-labelledby` | `string` | | -| `options` | options for dropdown | `[{label, value}]` | | -| `value` | pre-selected rows | `[{label, value}]` | `[]` | -| `focusSearchOnOpen` | focus on search input when opening | `boolean` | `true` | -| `hasSelectAll` | toggle 'Select All' option | `boolean` | `true` | -| `isLoading` | show spinner on select | `boolean` | `false` | -| `shouldToggleOnHover` | toggle dropdown on hover option | `boolean` | `false` | -| `overrideStrings` | Override default strings for i18n | `object` | | -| `onChange` | onChhange callback | `function` | | -| `disabled` | disable dropdown | `boolean` | `false` | -| `selectAllLabel` | _select all_ label | `string` | | -| `disableSearch` | hide search textbox | `boolean` | `false` | -| `filterOptions` | custom filter options | `function` | | +| Prop | Description | Type | Default | +| --------------------- | ---------------------------------- | ------------------ | -------------- | +| `labelledBy` | value for `aria-labelledby` | `string` | | +| `options` | options for dropdown | `[{label, value}]` | | +| `value` | pre-selected rows | `[{label, value}]` | `[]` | +| `focusSearchOnOpen` | focus on search input when opening | `boolean` | `true` | +| `hasSelectAll` | toggle 'Select All' option | `boolean` | `true` | +| `isLoading` | show spinner on select | `boolean` | `false` | +| `shouldToggleOnHover` | toggle dropdown on hover option | `boolean` | `false` | +| `overrideStrings` | Override default strings for i18n | `object` | | +| `onChange` | onChhange callback | `function` | | +| `disabled` | disable dropdown | `boolean` | `false` | +| `selectAllLabel` | _select all_ label | `string` | | +| `disableSearch` | hide search textbox | `boolean` | `false` | +| `filterOptions` | custom filter options | `function` | | +| `className` | class name for parent component | `string` | `multi-select` | ## 🌐 Internationalization diff --git a/package.json b/package.json index fe4f940..999798c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-multi-select-component", - "version": "2.0.3", + "version": "2.0.4", "description": "Simple and lightweight multiple selection dropdown component with checkboxes, search and select-all", "author": "Harsh Zalavadiya", "license": "MIT", diff --git a/src/lib/interfaces.ts b/src/lib/interfaces.ts index bf8bb46..69ff254 100644 --- a/src/lib/interfaces.ts +++ b/src/lib/interfaces.ts @@ -31,4 +31,5 @@ export interface ISelectProps { filterOptions?: (options: Option[], filter: string) => Option[]; overrideStrings?: { [key: string]: string }; labelledBy: string; + className?: string; } diff --git a/src/multi-select/index.tsx b/src/multi-select/index.tsx index b7656d6..c4143b1 100644 --- a/src/multi-select/index.tsx +++ b/src/multi-select/index.tsx @@ -30,6 +30,7 @@ const MultiSelect = ({ focusSearchOnOpen = true, hasSelectAll = true, shouldToggleOnHover = false, + className = "multi-select", options, value, valueRenderer, @@ -45,7 +46,7 @@ const MultiSelect = ({ }: ISelectProps) => { const nvalue = value || []; return ( -