mytabworks-react-select

easy like breezy

Description

This is easy and direct to the point react library which is build from the ground up using hooks to solve the problems in selection list especially when options are unreachable. it has no extra dependencies which is lighter than other library

Programming language: JavaScript

License: MIT License

Tags: UI Components     Select     React     React-component     Reactjs     Easy     Mytabworks    

README

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
defaultValue	array\	object
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    }>}>

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.