Fixed Options
In React Select, we can set some options as fixed means by default; in the case of multiselect, they should be selected.
Example : Implementation of React Select.
Javascript
// App.js import React from 'react' ; import Select from 'react-select' ; import makeAnimated from 'react-select/animated' ; import "./App.css" const animatedComponents = makeAnimated(); export default function AnimatedMulti() { const option = [ { label: "Web Development" , value: "Web Development" }, { label: "Data Science" , value: "Data Science" }, { label: "Machine Learning" , value: "Machine Learning" }, { label: "Game Development" , value: "Game Development" }, { label: "Design" , value: "Design" }, { label: "Data Structure" , value: "Data Structure" }, ] return ( <div className= 'App' > <h2>w3wiki</h2> <Select closeMenuOnSelect={ false } components={animatedComponents} isMulti defaultValue={[option[2], option[3]]} options={option} className= 'select' /> </div> ); } |
CSS
/* App.css */ .App { padding : 10px ; width : 30 vw; margin : auto ; display : flex; flex- direction : column; align-items: center ; color : green ; font-size : 24px ; } .select { min-width : 20 vw; } |
Output:
What is React Select ?
React Select is a drop-down select component that has multiple features like multi select and autocomplete. React select also offers custom styling and fixed selection in it. In this article, we are going to learn and implement React Select.
Contact Us