. Use Select2 with using React Hooks in reactjs typescript Skip to main content

Use Select2 with using React Hooks in reactjs typescript

Select2 is very popular for create very user friendly dropdown with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

Install Select2

From CDN 

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
 
From NPM
 npm install select2
After installation  we just need to put the selector with the html element and beautiful dropdown will created.
Simple Js Example: 
<select class="js-example-basic-single" name="state">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>
$(document).ready(function() {
    $('.js-example-basic-single').select2();
});

With React and Typescript

But when we are using js framework like reactjs it does work in every time. So I have created a gist to create Select2 in reactJs when we are using react with tyescript.

We need to install all type definition of Select2 for typescript.

npm install --save @types/select2

Here is the gist to show Select2 in react page using hooks-

;

Using the same in your react page-

<Select2Wrapper value={this.state.country_code} onChange={this.handleSelectChange}
className={'form-control'} id={'country_code'} name={'country_code'}
data={{
placeholder: "Select Options",
data: this.state.countrycodes
}}
/>
You can put the all Select2 Options according to docs inside data props. It can
handle all the functionality and options.

Labels:

Comments

Post a Comment

Popular posts from this blog

Day 7 - Challenge 2 - Valid Parentheses: A Guide to Checking Bracket Validity in JavaScript

Valid Parentheses: A Guide to Checking Bracket Validity in JavaScript Brackets are a fundamental part of programming languages and are used to group and structure code. In this blog post, we will explore the problem of determining whether a given string of brackets is valid or not using JavaScript. This problem is commonly referred to as the "Valid Parentheses" problem. Understanding the Problem: The problem statement provides a string that consists of three types of brackets: ( , ) , { , } , [ , and ] . The task is to determine whether the brackets in the string are arranged in a valid manner. For a string to be valid, each opening bracket must have a corresponding closing bracket of the same type, and they must be arranged in the correct order. For example, the strings "(){}[]" and "{[()]}" are valid, while "([)]" and "{{]}" are not. Approach: To solve this problem, we can use a stack data structure. The stack will help us keep tr...
Post a Comment
Read more

Day 9 - Challenge 2 - Reverse Linked List

Reversing a Singly Linked List in JavaScript: An In-Place Approach Introduction:   Singly linked lists are fundamental data structures in computer science that consist of a sequence of nodes, each containing data and a reference to the next node in the list. Reversing a singly linked list is a classic problem that challenges programmers to manipulate pointers effectively to achieve the desired outcome. In this blog post, we'll explore the problem of reversing a singly linked list using an in-place approach and provide a step-by-step solution in JavaScript. Problem Statement:   Given the head of a singly linked list, our task is to reverse the list in-place and return its new head. In other words, we need to modify the pointers of the nodes in such a way that the direction of the linked list is reversed. Solution Approach:   To solve this problem, we will iterate through the linked list while maintaining three pointers: previous , current , and next . The previous pointer...
Post a Comment
Read more

Day 6 - Challenge 3 - Array Rotation JavaScript

Solving the Array Rotation Problem using JavaScript Introduction:  Array manipulation is a common task in programming, and one interesting challenge is rotating an array to the right by a given number of steps. In this blog post, we will explore the array rotation problem, understand the approach to solving it, and implement a JavaScript program that effectively rotates an array. Problem Description:  Given an array of integers and a rotation count k , the task is to rotate the array to the right by k steps. For instance, if the input array is [1, 2, 3, 4, 5] and k is 2, the expected output would be [4, 5, 1, 2, 3] . Approach:  To solve the array rotation problem, we can use a cyclic rotation approach. The idea is to repeatedly move the elements to their final positions while ensuring that we don't overwrite any values. This can be achieved in a few steps: Calculate the effective rotation count: Since rotating an array by its length or multiples of its length would res...
Post a Comment
Read more