Skip to content

improved i18n documentation #52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 14, 2020
Merged

improved i18n documentation #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 21 additions & 19 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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
{
Expand All @@ -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 {
Expand Down
6 changes: 3 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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": {
Expand Down