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

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

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

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

tree-component .A reactjs and vuejs tree component.

tour-component .A vuejs and reactjs tour component.

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