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
• How To Use
  • Importing
  • Basic Usage
  • Controllable Value Usage
  • Multiple Property Usage
  • Option Group Usage
  • Disabled Usage
  • isSearch Property Usage
  • sortAlgorithm Property Usage
  • Typescript Supported Usage
• Properties
• Keyboard Functionalities
• License

installation

npm i mytabworks-react-select

or

yarn add mytabworks-react-select

How to use

import to your project

import Select from 'mytabworks-react-select'

Basic Usage

<Select id="country" name="country" placeholder="Choose one">
    {[
        {label: "Philippines", value: "ph"},
        {label: "United States", value: "us"},
        {label: "Africa", value: "af"}
    ]}
</Select>

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.

<Select id="country" name="country" value="ph">
    {[
        {label: "Philippines", value: "ph"},
        {label: "United States", value: "us"},
        {label: "Africa", value: "af"}
    ]}
</Select>

Multiple Property Usage

It can select multiple options and set multiple default values.

<Select id="emotions" name="emotions" placeholder="choose one or more" defaultValue={["1","2"]} multiple>
    {[
        {label: "Happy", value: "1"},
        {label: "Excited", value: "2"},
        {label: "Sad", value: "3"},
        {label: "Angry", value: "4"}, 
        {label: "Scared", value: "5"},
        {label: "Hype", value: "6"}
    ]}
</Select>

Option Group Usage

It can group the options.

<Select id="emotions" name="emotions" defaultValue={["1","2"]} multiple>
    {[  
        {label: "Possitive", value: [
            {label: "Happy", value: "1"},
            {label: "Excited", value: "2"}
        ]}, 
        {label: "Negative", value: [
            {label: "Sad", value: "3"},
            {label: "Angry", value: "4"}, 
            {label: "Scared", value: "5"}
        ]},
        {label: "Hype", value: "6"}
    ]}
</Select>

Disabled Usage

It can group the options.

<Select id="emotions" name="emotions" defaultValue={["1","2"]} multiple disabled>
    {[  
        {label: "Possitive", value: [
            {label: "Happy", value: "1"},
            {label: "Excited", value: "2"}
        ]}, 
        {label: "Negative", value: [
            {label: "Sad", value: "3"},
            {label: "Angry", value: "4"}, 
            {label: "Scared", value: "5"}
        ]},
        {label: "Hype", value: "6"}
    ]}
</Select>

isSearch Property Usage

It suggest an option when starting searching or typing

const list = [....]
....

<Select id="list" name="list" multiple isSearch searchSpeed={100}>
    {list}
</Select>

sortAlgorithm Property Usage

It can change the algorithm of the search when sorting

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

<Select id="list" name="list" multiple isSearch searchSpeed={100}
sortAlgorithm={priority_and_asc_algo}>
    {list}
</Select>

Typescript Supported Usage

import Select, {SelectProps, OptionProps} from "mytabworks-react-select"

const list: OptionProps[] = [....]
....

<Select id="list" name="list" multiple isSearch searchSpeed={100}>
    {list}
</Select>

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| | 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.