Mytabworks-react-select NPM

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

npm i mytabworks-react-select

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