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.

Usage no npm install needed!

<script type="module">
  import mytabworksReactSelect from 'https://cdn.skypack.dev/mytabworks-react-select';
</script>

README

github npm yarn bundlephobia

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

or

yarn add mytabworks-react-select

How to use

import to your project

import Select from 'mytabworks-react-select'

Basic Usage

Edit mytabworks-react-select

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

Edit mytabworks-react-select

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

Edit mytabworks-react-select

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

Edit mytabworks-react-select

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

Edit mytabworks-react-select

<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

Edit mytabworks-react-select

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

Edit mytabworks-react-select

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.