diff --git a/README.md b/README.md index b4b9a9f..e1a1e07 100644 --- a/README.md +++ b/README.md @@ -56,26 +56,26 @@ export default Example; ## 👀 Props -| Prop | Description | Type | Default | -| --------------------- | ---------------------------------- | ---------------------------- | -------------- | -| `labelledBy` | value for `aria-labelledby` | `string` | | -| `options` | options for dropdown | `[{label, value, disabled}]` | | -| `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` | onChange callback | `function` | | -| `disabled` | disable dropdown | `boolean` | `false` | -| `selectAllLabel` | _select all_ label | `string` | | -| `disableSearch` | hide search textbox | `boolean` | `false` | -| `filterOptions` | custom filter options | `function` | Fuzzy Search | -| `className` | class name for parent component | `string` | `multi-select` | +| Prop | Description | Type | Default | +| --------------------- | ----------------------------------- | ---------------------------- | -------------- | +| `labelledBy` | value for `aria-labelledby` | `string` | | +| `options` | options for dropdown | `[{label, value, disabled}]` | | +| `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` | i18n [docs](#-internationalization) | `object` | | +| `onChange` | onChange callback | `function` | | +| `disabled` | disable dropdown | `boolean` | `false` | +| `selectAllLabel` | _select all_ label | `string` | | +| `disableSearch` | hide search textbox | `boolean` | `false` | +| `filterOptions` | custom filter options | `function` | Fuzzy Search | +| `className` | class name for parent component | `string` | `multi-select` | ### 🔍 Custom filter logic -By default this component uses fuzzy search algorithm to filter options but also allows you to opt-out and use your own logic if you want to below is the example doing just case insensitive search +By default this component uses a fuzzy search algorithm to filter options but also allows you to opt-out and use your custom logic if you want to below is the example doing just case insensitive search ```js export function filterOptions(options, filter) { @@ -89,7 +89,9 @@ export function filterOptions(options, filter) { ## 🌐 Internationalization -You can override the strings to be whatever you want, including translations for your languages. +You can easily Internationalize this component by passing prop `overrideStrings` so that UI strings can be presented in a different language + +default values for `overrideStrings` are as below ```json { @@ -102,7 +104,7 @@ You can override the strings to be whatever you want, including translations for ## 💅 Themeing -You can override css variables to customize appearance +You can override CSS variables to customize the appearance ```css .multi-select { diff --git a/package.json b/package.json index 152713e..ddfd174 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-multi-select-component", - "version": "2.0.9", + "version": "2.0.10", "description": "Simple and lightweight multiple selection dropdown component with checkboxes, search and select-all", "author": "Harsh Zalavadiya", "license": "MIT", @@ -36,7 +36,7 @@ "@storybook/addon-storysource": "^5.3.19", "@storybook/addons": "^5.3.19", "@storybook/react": "^5.3.19", - "@types/react": "^16.9.35", + "@types/react": "^16.9.36", "@types/react-dom": "^16.9.8", "babel-loader": "^8.1.0", "husky": "^4.2.5", @@ -48,7 +48,7 @@ "ts-loader": "^7.0.5", "tsdx": "^0.13.2", "tslib": "^2.0.0", - "typescript": "^3.9.3" + "typescript": "^3.9.5" }, "husky": { "hooks": {