A Vuejs and Reactjs Select Component

A Vuejs and Reactjs Select Component

select2-component 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 rel="stylesheet" href="./node_modules/select2-component/dist/select2.min.css" />

vuejs component

gzip size

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

gzip size

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

A Reactjs and Vuejs Tree Component

tree-component .A reactjs and vuejs tree component.

A Vuejs and Reactjs Tour Component

tour-component .A vuejs and reactjs tour component.

Vue vs. React: The Future of Front-End Development

In this post, we'll discuss the strengths and weaknesses of Vue.js and React.js, and also what the future holds for both in Frontend Development. Vue.js and React.js are two popular frontend JavaScript frameworks among web developers worldwide at present

A reactjs and vuejs component of file uploader

A reactjs and vuejs component of file uploader