customizable parent className

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
 

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",

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;
 }

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 (
-    <div className={`${MultiSelectBox} multi-select`}>
+    <div className={`${MultiSelectBox} ${className}`}>
       <Dropdown
         isLoading={isLoading}
         contentComponent={SelectPanel}

stories/default.stories.tsx

@@ -31,6 +31,7 @@ export const toStorybook = () => {
         disabled={boolean("disabled", false)}
         onChange={setSelected}
         labelledBy={text("labelledBy", "Select Fruits")}
+        className={text("className", "multi-select")}
       />
     </div>
   );