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
mytabworks-react-select alternatives and similar libraries
Based on the "Select" category.
Alternatively, view mytabworks-react-select alternatives based on common mentions on social networks and blogs.
-
React Virtualized Select
HOC that uses react-virtualized and react-select to display large lists of options in a drop-down -
react-styled-select
A Select control built with Reactjs, styled-components and :heart: http://agutoli.github.io/ -
React Responsive Select
A customisable, touchable, React select / multi-select form control. Built with keyboard and screen reader accessibility in mind
Civic Auth - Auth in Less Than 5 Minutes

Do you think we are missing an alternative of mytabworks-react-select or a related project?
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
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
<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
<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.
*Note that all licence references and agreements mentioned in the mytabworks-react-select README section above
are relevant to that project's source code only.