# mytabworks-react-select > It is build from the ground up to solve the problem in selection list especially when options are unreachable without extra dependencies. Latest version **0.2.5** (published 2020-03-05) · MIT license · 0 weekly downloads ## Install ```sh npm install mytabworks-react-select pnpm add mytabworks-react-select yarn add mytabworks-react-select bun add mytabworks-react-select ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.2.5 | | Published | 2020-03-05 | | First published | 2020-02-14 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 1 | | Unpacked size | 33.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1 | | Author | mytabworks | | Maintainers | mytabworks | | Keywords | react-select, mytabworks, react, select, react-select, mytabworks-react-select, form-select, easy-select, good-select, good-easy-select, beautiful-select | ## Links - npm: https://www.npmjs.com/package/mytabworks-react-select - Repository: https://github.com/mytabworks/mytabworks-react-select - Homepage: https://github.com/mytabworks/mytabworks-react-select#readme - Issues: https://github.com/mytabworks/mytabworks-react-select/issues - npm.io page: https://npm.io/package/mytabworks-react-select ## Dependencies (1) - [mytabworks-utils](https://npm.io/package/mytabworks-utils.md) ^1.1.1 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.2.5 (latest) — 2020-03-05 - 0.2.4 — 2020-03-02 - 0.2.3 — 2020-02-27 - 0.2.2 — 2020-02-27 - 0.2.1 — 2020-02-26 - 0.1.9 — 2020-02-26 - 0.1.8 — 2020-02-19 - 0.1.7 — 2020-02-19 - 0.1.6 — 2020-02-19 - 0.1.5 — 2020-02-17 - 0.1.4 — 2020-02-17 - 0.1.3 — 2020-02-16 - 0.1.2 — 2020-02-15 - 0.1.1 — 2020-02-14 - 0.1.0 — 2020-02-14 ## README [![github](https://img.shields.io/badge/-github-gray?style=for-the-badge&logo=github)](https://github.com/mytabworks/mytabworks-react-select#readme) [![npm](https://img.shields.io/npm/v/mytabworks-react-select?color=crimson&logo=npm&style=for-the-badge)](https://www.npmjs.com/package/mytabworks-react-select) [![yarn](https://img.shields.io/npm/v/mytabworks-react-select?color=blue&label=yarn&style=for-the-badge&logo=yarn)](https://classic.yarnpkg.com/en/package/mytabworks-react-select) [![bundlephobia](https://img.shields.io/bundlephobia/minzip/mytabworks-react-select?color=%2371bba4&logo=bundlephobia&style=for-the-badge)](https://bundlephobia.com/result?p=mytabworks-react-select) # mytabworks-react-select This was an un-mediocre module which is build from the ground up to solve the problems in selection list especially when options are unreachable. it has no extra dependencies which can be a little less. - [Installation](#installation) - [How To Use](#how-to-use) - [Importing](#import-to-your-project) - [Basic Usage](#basic-usage) - [Controllable Value Usage](#controllable-value-usage) - [Multiple Property Usage](#multiple-property-usage) - [Option Group Usage](#option-group-usage) - [Disabled Usage](#disabled-usage) - [isSearch Property Usage](#issearch-property-usage) - [sortAlgorithm Property Usage](#sortalgorithm-property-usage) - [Typescript Supported Usage](#typescript-supported-usage) - [Properties](#properties) - [Keyboard Functionalities](#keyboard-functionalities) - [License](#license) # installation ``` npm i mytabworks-react-select ``` or ``` yarn add mytabworks-react-select ``` # How to use ## import to your project ```js import Select from 'mytabworks-react-select' ``` ## Basic Usage [![Edit mytabworks-react-select](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/mytabworks-react-select-06plg?fontsize=14&hidenavigation=1&theme=dark) ```html ``` ## Controllable Value Usage It will set a value of the select, but without onChange event it will be like a `read-only`. instead use `defaultValue`.

[![Edit mytabworks-react-select](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/mytabworks-react-select-06plg?fontsize=14&hidenavigation=1&theme=dark) ```html ``` ## Multiple Property Usage It can select multiple options and set multiple default values.

[![Edit mytabworks-react-select](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/mytabworks-react-select-06plg?fontsize=14&hidenavigation=1&theme=dark) ```html ``` ## Option Group Usage It can group the options.

[![Edit mytabworks-react-select](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/mytabworks-react-select-06plg?fontsize=14&hidenavigation=1&theme=dark) ```html ``` ## Disabled Usage It can group the options.

[![Edit mytabworks-react-select](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/mytabworks-react-select-06plg?fontsize=14&hidenavigation=1&theme=dark) ```html ``` ## isSearch Property Usage It suggest an option when starting searching or typing

[![Edit mytabworks-react-select](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/mytabworks-react-select-06plg?fontsize=14&hidenavigation=1&theme=dark) ```js const list = [....] .... ``` ```html ``` ## sortAlgorithm Property Usage It can change the algorithm of the search when sorting

[![Edit mytabworks-react-select](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/mytabworks-react-select-06plg?fontsize=14&hidenavigation=1&theme=dark) ```js const list = [....] const priority_and_asc_algo = (a, b, {pattern, search, asc_algo}) => { const a_ = a.label.match(pattern).index; const b_ = b.label.match(pattern).index; const priority = ["Sund", "Budol budol"] return (a_ === 0 && priority.includes(a.label)) || ( b_ === 0 && priority.includes(b.label) ? false : asc_algo ) } const desc_algo = (a, b, {pattern}) => { const a_ = a.label.match(pattern).index; const b_ = b.label.match(pattern).index; return a_ > b_ } ``` ```html ``` ## Typescript Supported Usage ```js import Select, {SelectProps, OptionProps} from "mytabworks-react-select" ``` ```js const list: OptionProps[] = [....] .... ``` ```html ``` # Properties All properties that is supported by mytabworks-react-select.
The datatypes with "*" means it is required. |`PROPERTY` |`DATATYPES` |`DEFAULT` |`DESCRIPTION`| |-------------|---------------|-------------|-------------| | id | string * |   | id of the HTML select| | name | string * |   | name of the HTML select| | value | array\|object |   | control the [current value](#controllable-value-usage)| | defaultValue| array\|object |   | the default value| | placeholder | string |   | placeholder of your Select| | className | string |   | additional className for the Component container| | disabled | bolean | false | disabling the Select| | multiple | boolean | false | it allow users to select multiple option| | isAutoClear | boolean | false | it clear the searched text after selecting| | isSearch | boolean | false | it only drop the options when start typing| | isAutoNavigate| boolean | false | it navigates the first row in the options without navigating | | isClearOptions | boolean | true | it clear the option list when options is not active | | isShowNoDisplay | boolean | true | it will show the noDisplay when there is no option matched, if it is false it will not show| | isFromStartSearch | boolean | false | it only allow matches from the exact beginning of the searched text | | onChange | function | | it enables to subscribe change event| | noDisplayText| string | "no option" | the text when there is no option| | searchSpeed | number | 500 | it is the delay when stop typing| | sortAlgorithm | function |   | it is use to change the algorithm of the sort, it must return true if option a is ascending from option b. false if option a is decending | | children | Array<{
   label: string,
   value: string\|Array<{
      label: string,
      value: string
   }>
}>| | the option list | # Keyboard Functionalities |`KEY`|`DESCRIPTION`|`REQUIREMENT` | |-----------|-------------|--------------| | Arrow Down| arrow down can be use to navigate selection downward| when options is opened | | Arrow Up | arrow up can be use to navigate selection upward|when options is opened | | Enter | enter can be use when you already navigated your option| when options is opened | Backspace | backspace can be use when search bar is already empty in multiple selection list| when searchbar is already empty but will not triggered when there is a text then use backspace till its empty unless the searchbar is already empty | | ESC | it will close the dropdown option| | ## License MIT Licensed. Copyright (c) fernando tabamo jr(Mytabworks) 2020. --- _Source: https://npm.io/package/mytabworks-react-select · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._