A Vuejs and Reactjs Select Component

select2-component

A vuejs and reactjs select component.

features

• vuejs component
• reactjs component
• select one
• options or groups
• scroll
• local search
• select by keyboard
• disabled option
• disabled component
• hide search box
• placeholder
• custom component(vuejs and reactjs only)
• multiple selection

link css

<link rel="stylesheet" href="./node_modules/select2-component/dist/select2.min.css" />

vuejs component

npm i select2-vue-component

import { Select2 } from "select2-vue-component";
app.component('select2', Select2)

or

<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/select2-vue-component/dist/select2-vue-component.min.js"></script>

<select2 :data="data"
    :value="value"
    @update="update($event)">
</select2>

the online demo: https://plantain-00.github.io/select2-component/packages/vue/demo

reactjs component

npm i select2-react-component

import { Select2 } from "select2-react-component";

or

<script src="./node_modules/react/umd/react.production.min.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.production.min.js"></script>
<script src="./node_modules/select2-react-component/dist/select2-react-component.min.js"></script>

<Select2 data={this.data}
    value={this.value}
    update={value => this.update(value)}>
</Select2>

the online demo: https://plantain-00.github.io/select2-component/packages/react/demo

properties and events of the component

name	type	description
data	Select2Data	the data of the select2
value	Select2Value?	initial value
disabled	boolean?	whether the component is disabled
minCountForSearch	number? = 6	hide search box if options.length < minCountForSearch
placeholder	string?	the placeholder string if nothing selected
customSearchEnabled	boolean?	will trigger search event, and disable inside filter
multiple	boolean?	select multiple options
update	(value: Select2UpdateValue) => void	triggered when user select an option
open	() => void	triggered when user open the options
search	(text: string) => void	triggered when search text changed
keydown, keyup, keypress	(e: KeyboardEvent) => void	triggered when search input triggers keydown, keyup, keypress
minimumInputLength	number?	if minimumInputLength = 3, only start searching when the user has input 3 or more characters
maximumInputLength	number?	if maximumInputLength = 20, only allow terms up to 20 characters long
keepSearchText	boolean?	keep search text when the dropdown opens

select2 data structure

type Select2Data = (Select2Group | Select2Option)[];

type Select2Group = {
    label: string;
    options: Select2Option[];
    classes?: string;
};

type Select2Option = {
    value: Select2Value;
    label: string;
    disabled?: boolean;
    component?: string | Function; // the component
    classes?: string;
};

type Select2Value = string | number | boolean;

type Select2UpdateValue = Select2Value | Select2Value[];

auto complete

vuejs auto complete component

npm i select2-vue-component

import Vue from "vue";
import { AutoComplete } "select2-vue-component";

Vue.component("auto-complete", AutoComplete)

<auto-complete :data="data"
    :value="value"
    @search="search($event)"
    @select="select($event)">
</auto-complete>

reactjs auto complete component

npm i select2-react-component

import { AutoComplete } from "select2-react-component";

<AutoComplete data={this.data}
    value={this.value}
    search={value => this.search(value)}
    select={value => this.select(value)}>
</AutoComplete>

properties and events of the auto complete component

name	type	description
data	Select2Data	the data of the select2
value	string	initial value
update	(value: Select2UpdateValue) => void	triggered when user change search text or select an option
select	(value: Select2UpdateValue) => void	triggered when user select an option
search	(text: string) => void	triggered when search text changed
keydown, keyup, keypress	(e: KeyboardEvent) => void	triggered when search input triggers keydown, keyup, keypress

change logs

// v5 vue 2
import 'select2-vue-component'

// v6 vue 3
import { Select2 } from "select2-vue-component"
app.component('select2', Select2)

# v4
npm i select2-component

# v5
npm i select2-vue-component
npm i select2-react-component
npm i select2-angular-component

// v4
import "select2-component/vue";
import { Select2 } from "select2-component/react";
import { Select2Module } from "select2-component/angular";

// v5
import "select2-vue-component";
import { Select2 } from "select2-react-component";
import { Select2Module } from "select2-angular-component";

// v4
<link rel="stylesheet" href="./node_modules/select2-component/select2.min.css" />

// v5
<link rel="stylesheet" href="./node_modules/select2-component/dist/select2.min.css" />

// v3 angular AOT:
import { Select2Module } from "select2-component/angular";

// v4 angular AOT:
import { Select2Module } from "select2-component/aot/angular";

// v3.1
import { Select2Module } from "select2-component/angular";
import { Select2 } from "select2-component/angular.component";

// v3.0
import { Select2Component } from "select2-component/angular";

// v3
<link rel="stylesheet" href="./node_modules/select2-component/select2.min.css" />
import "select2-component/vue";
import { Select2 } from "select2-component/react";
import { Select2Component } from "select2-component/angular";

// v2
<link rel="stylesheet" href="./node_modules/select2-component/dist/select2.min.css" />
import "select2-component/dist/vue";
import { Select2 } from "select2-component/dist/react";
import { Select2Component } from "select2-component/dist/angular";

// v2
<select2 [data]="data"
    [value]="value"
    (update)="update($event)">
</select2>

// v1
<select2 [data]="data"
    [value]="value"
    (select)="select($event)">
</select2>

Download Details:

Author: plantain-00

Source Code: https://github.com/plantain-00/select2-component

#vuejs #javascript #vue #react #reactjs