Nextjs React Select 2 Wrapper

Pro Component

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

Usage

CSS

In order to use this plugin on your page you will need to import the following styles inside your pages/_app.js:

import "assets/vendor/select2/dist/css/select2.min.css";

Example

import React from "react";
 // react plugin used to create DropdownMenu for selecting items
 import Select2 from "react-select2-wrapper";
 // reactstrap components
 import {
   Form
 } from "reactstrap";

 const options = {
   placeholder: "Select"
 };

 class Dropdown extends React.Component {
   render() {
     return (
       <>
         <Form>
           <Select2
             className="form-control"
             defaultValue="1"
             options={options}
             data={[
               { id: "1", text: "Alerts" },
               { id: "2", text: "Badges" },
               { id: "3", text: "Buttons" },
               { id: "4", text: "Cards" },
               { id: "5", text: "Forms" },
               { id: "6", text: "Modals" }
             ]}
           />
         </Form>
       </>
     );
   }
 }

 export default Dropdown;

Placeholder

import React from "react";
 // react plugin used to create DropdownMenu for selecting items
 import Select2 from "react-select2-wrapper";
 // reactstrap components
 import {
   Form
 } from "reactstrap";

 const options = {
   placeholder: "Select"
 };

 class Dropdown extends React.Component {
   render() {
     return (
       <>
         <Form>
           <Select2
             className="form-control"
             defaultValue="1"
             options={options}
             data={[
               { id: "1", text: "Alerts" },
               { id: "2", text: "Badges" },
               { id: "3", text: "Buttons" },
               { id: "4", text: "Cards" },
               { id: "5", text: "Forms" },
               { id: "6", text: "Modals" }
             ]}
           />
         </Form>
       </>
     );
   }
 }

 export default Dropdown;

Disabled select

import React from "react";
 // react plugin used to create DropdownMenu for selecting items
 import Select2 from "react-select2-wrapper";
 // reactstrap components
 import {
   Form
 } from "reactstrap";

 const options = {
   disabled: true
 };

 class Dropdown extends React.Component {
   render() {
     return (
       <>
         <Form>
           <Select2
             className="form-control"
             defaultValue="1"
             options={options}
             data={[
               { id: "1", text: "Alerts" },
               { id: "2", text: "Badges" },
               { id: "3", text: "Buttons" },
               { id: "4", text: "Cards" },
               { id: "5", text: "Forms" },
               { id: "6", text: "Modals" }
             ]}
           />
         </Form>
       </>
     );
   }
 }

 export default Dropdown;

Disabled results

import React from "react";
 // react plugin used to create DropdownMenu for selecting items
 import Select2 from "react-select2-wrapper";
 // reactstrap components
 import {
   Form
 } from "reactstrap";

 const options = {
   placeholder: "Select"
 };

 class Dropdown extends React.Component {
   state = {
     select: null
   };
   render() {
     return (
       <>
         <Form>
           <Select2
             className="form-control"
             defaultValue="1"
             options={options}
             data={[
               { id: "1", text: "Alerts" },
               { id: "2", text: "Badges" },
               { id: "3", text: "Buttons", disabled: true },
               { id: "4", text: "Cards" },
               { id: "5", text: "Forms", disabled: true },
               { id: "6", text: "Modals" }
             ]}
           />
         </Form>
       </>
     );
   }
 }

 export default Dropdown;

import React from "react";
 // react plugin used to create DropdownMenu for selecting items
 import Select2 from "react-select2-wrapper";
 // reactstrap components
 import {
   Form
 } from "reactstrap";

 class Dropdown extends React.Component {
   state = {
     select: null
   };
   render() {
     return (
       <>
         <Form>
           <Select2
             className="form-control"
             data-minimum-results-for-search="Infinity"
             defaultValue="1"
             data={[
               { id: "1", text: "Alerts" },
               { id: "2", text: "Badges" },
               { id: "3", text: "Buttons" },
               { id: "4", text: "Cards" },
               { id: "5", text: "Forms" },
               { id: "6", text: "Modals" }
             ]}
           />
         </Form>
       </>
     );
   }
 }

 export default Dropdown;

Multiple

import React from "react";
 // react plugin used to create DropdownMenu for selecting items
 import Select2 from "react-select2-wrapper";
 // reactstrap components
 import {
   Form
 } from "reactstrap";

 class Dropdown extends React.Component {
   state = {
     select: null
   };
   render() {
     return (
       <>
         <Form>
           <Select2
             className="form-control"
             defaultValue="1"
             multiple
             data={[
               { id: "1", text: "Alerts" },
               { id: "2", text: "Badges" },
               { id: "3", text: "Buttons" },
               { id: "4", text: "Cards" },
               { id: "5", text: "Forms" },
               { id: "6", text: "Modals" }
             ]}
           />
         </Form>
       </>
     );
   }
 }

 export default Dropdown;

Props

Please check the Official Github Repository.

Also, please check the official Select2 Documentation and its Official Github Repository.