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:

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

Example

Copy
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

Copy
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

Copy
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

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

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