Creați meniuri derulante frumoase cu React Select

O intrare selectată este o componentă utilă a aplicației web care vă permite să alegeți o valoare din multe opțiuni fără a ocupa mult spațiu. Dar stilul implicit poate fi plictisitor și poate intra în conflict cu restul designului tău.

React Select oferă o soluție flexibilă și personalizabilă pentru a îmbunătăți aspectul și funcționalitatea intrărilor drop-down.

Instalarea React Select

Integrarea React cu alte biblioteci sau tehnologii, precum React Select, React Redux și multe altele, pot simplifica procesul de dezvoltare.

Pentru a începe cu React Select, trebuie să îl instalați în proiect. La faceți acest lucru folosind npm, rulați această comandă de terminal în directorul de proiect:

npm i --save react-select

Aceasta va instala și configura biblioteca în proiectul dvs. React, astfel încât să puteți începe să o utilizați.

Crearea intrărilor Select cu React Select

Acum că ați configurat biblioteca, o puteți utiliza pentru a crea intrări selectate. Pentru a face acest lucru, veți folosi

Selectați componentă. Aceasta este o componentă extrem de personalizabilă, care permite utilizatorilor să selecteze opțiuni dintr-o listă.

Iată un exemplu de utilizare a componentei Select:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 ]
return (




 </div>
 )
}
exportdefault App

Acest exemplu începe prin importul Selectați componentă din „reacționează-selectează”. Acesta definește o Opțiuni matrice cu trei obiecte, fiecare cu a valoare si a eticheta proprietate. Proprietatea value reprezintă valoarea pe care formularul o va trimite backend-ului atunci când îl trimiteți. Proprietatea etichetă este textul pe care componenta Select îl va afișa în meniul drop-down.

Când randați componenta Select, transmiteți-i matricea de opțiuni folosind Opțiuni recuzită.

Cu acest bloc de cod, biblioteca React Select va genera un dropdown ca acesta:

Personalizarea intrărilor de selectare

React Select oferă diverse moduri de personalizare a intrărilor selectate. Puteți utiliza clase CSS sau puteți aplica stiluri inline direct intrărilor selectate, în funcție de preferințele dvs.

Personalizarea cu clase CSS

Biblioteca React Select oferă a numele clasei recuzită pentru Selectați componentă. Utilizați această prop. className pentru a aplica o foaie de stil în cascadă personalizată (CSS) stiluri la componentele dvs. Select.

De exemplu:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 ]
return (



'select'/>
 </div>
 )
}
exportdefault App

Blocul de cod de mai sus este similar cu cel anterior, dar folosește numele clasei prop pentru a aplica o clasă CSS personalizată la Selectați componentă. Furnizați un nume în prop className și îl puteți folosi pentru a aplica stiluri CSS la componentă:

.select {
color: #333333;
font-family: cursive;
inline-size: 30%;
font-size: 11px;
}

După definirea stilurilor, intrarea selectată va arăta astfel:

Personalizare cu stiluri inline

De asemenea, puteți defini stiluri inline într-un obiect pe care îl treceți prin intermediul stiluri prop de la Selectați componentă. Acest lucru vă oferă mai mult control asupra stilului elementelor individuale.

Iată un exemplu:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 ]
const customStyles = {
 control: (baseStyles, state) => ({
 ...baseStyles,
 backgroundColor: "#e2e2e2",
 }),
 option: (baseStyles, state) => ({
 ...baseStyles,
 backgroundColor: state.isFocused? "#e2e2e2": "",
 color: state.isFocused? "#333333": "#FFFFFF",
 }),
 menu: (baseStyles, state) => ({
 ...baseStyles,
 backgroundColor: "#333333",
 }),
 }
return (




 </div>
 )
}
exportdefault App

Obiectul de recuzită, Stiluri personalizate, conține proprietăți de stil pentru componentele Selectare Control, opțiune, și meniul părți. Aceste proprietăți sunt funcții care iau două argumente: bazeStyles și stat.

Parametrul baseStyles reprezintă stilurile implicite furnizate de React Select, în timp ce parametrul de stare reprezintă starea curentă a elementului. În acest exemplu, funcțiile folosesc operatorul spread pentru a combina stilurile de bază cu stiluri suplimentare pentru fiecare parte a componentei.

După aplicarea acestor stiluri, intrarea selectată ar trebui să arate astfel:

Adăugarea de funcționalități la intrările de selectare

React Select oferă mai multe caracteristici pentru a îmbunătăți funcționalitatea intrărilor selectate. Puteți activa funcționalitatea de selecție multiplă și de căutare și chiar puteți crea componente derulante personalizate.

Funcționalitate cu selecție multiplă

Pentru a activa funcționalitatea de selecție multiplă în meniurile dvs. derulante, transmiteți isMulti prop la componenta Select. Acest lucru le permite utilizatorilor să selecteze mai multe opțiuni din meniul drop-down.

De exemplu:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 { value: "grapes", label: "Grapes" },
 { value: "orange", label: "Orange" },
 ]
return (




 </div>
 )
}
exportdefault App

Acest exemplu demonstrează cum se utilizează isMulti prop pentru a adăuga funcționalitatea de selecție multiplă la intrările selectate.

Funcționalitatea de căutare

Biblioteca React Select oferă funcționalitate de căutare încorporată pentru a filtra opțiunile cu ușurință. În mod implicit, componenta Select afișează intrarea de căutare atunci când deschideți meniul derulant. Utilizatorii pot introduce intrarea de căutare pentru a filtra opțiunile disponibile.

Pentru a activa funcționalitatea de căutare, treceți esteSearchable prop la Selectați componentă. Ca isMulti prop, isSearchable acceptă o valoare booleană.

Iată un exemplu despre cum să utilizați prop isSearchable pentru a activa funcționalitatea de căutare:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "apricot", label: "Apricot" },
 { value: "mango", label: "Mango" },
 { value: "mangosteens", label: "Mangosteens" },
 { value: "avocado", label: "Avocado" },
 ]
return (




 </div>
 )
}
exportdefault App

Redarea blocului de cod de mai sus va afișa o intrare selectată cu funcționalitate de căutare. Va arata si va functiona astfel:

Creați componente derulant personalizate

React Select vă permite să creați componente derulante personalizate folosind prop. componente. Puteți suprascrie componentele implicite furnizate de React Select și puteți personaliza aspectul și comportamentul meniului derulant pentru a se potrivi gusturilor dvs.

De exemplu:

import React from"react"
import Select, { components } from"react-select"
functionApp() {
const CustomOption = (obj) => (



{obj.label}</span>
marginInlineStart: "0.2rem" }}>Fruit</span>
 </div>
 )

const CustomDropdownIndicator = (props) => (

↓</span>
 </components.DropdownIndicator>
 )
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 ]
const customComponents = {
 Option: CustomOption,
 DropdownIndicator: CustomDropdownIndicator,
 }
return<Selectoptions={options}components={customComponents} />
}
exportdefault App

Acest bloc de cod arată cum să creați componente personalizate pentru o intrare selectată folosind componente prop de la Selectați componentă. Acesta importă componente obiect care este o colecție de componente predefinite pe care le puteți utiliza pentru a personaliza aspectul și comportamentul diferitelor elemente din intrările selectate.

Codul definește două componente funcționale: CustomOption și CustomDropdownIndicator. Componenta CustomOption ia un obiect ca parametru. Acest obiect conține diverse proprietăți pe care React Select le oferă, cum ar fi innerProps și eticheta.

Componenta CustomDropdownIndicator preia recuzită ca parametru. Această componentă redă un indicator derulant personalizat cu un simbol săgeată în jos. Codul creează un Componente personalizate obiect care mapează componentele CustomOption și CustomDropdownIndicator la componentele corespunzătoare Opțiune și DropdownIndicator chei.

În cele din urmă, acest cod transmite obiectul customComponents propului componentelor componentei Select. Aceasta va reda o intrare selectată cu componentele personalizate, arătând astfel:

Componentele standard pot fi mai puternice și mai atractive

React Select este o bibliotecă puternică care vă permite să creați intrări selectate frumoase și elegante în React. Puteți personaliza intrările selectate, le puteți adăuga funcționalități și puteți crea componente derulante personalizate. Profitând de această bibliotecă, puteți îmbunătăți aspectul și experiența utilizatorului aplicațiilor dvs. React.