Oživite svoje dosadne padajuće izbornike ovom fleksibilnom bibliotekom React.

Odabir unosa korisna je komponenta web-aplikacije koja vam omogućuje odabir vrijednosti iz mnogih opcija bez zauzimanja puno prostora. Ali zadani stil može biti dosadan i sukobljavati se s ostatkom vašeg dizajna.

React Select pruža fleksibilno i prilagodljivo rješenje za poboljšanje izgleda i funkcionalnosti padajućih unosa.

Instaliranje React Selecta

Integracija Reacta s drugim bibliotekama ili tehnologijama, kao što su React Select, React Redux i mnogi drugi, mogu pojednostaviti proces razvoja.

Da biste započeli s React Selectom, morate ga instalirati u svoj projekt. Do učinite to koristeći npm, pokrenite ovu naredbu terminala u vašem direktoriju projekta:

npm i --save react-select

Ovo će instalirati i postaviti biblioteku u vaš React projekt, tako da je možete početi koristiti.

Stvaranje Select ulaza s React Selectom

Sada kada ste postavili biblioteku, možete je koristiti za stvaranje odabranih ulaza. Da biste to učinili, upotrijebit ćete

instagram viewer
Izaberi komponenta. Ovo je vrlo prilagodljiva komponenta koja korisnicima omogućuje odabir opcija s popisa.

Evo primjera kako koristiti komponentu 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

Ovaj primjer počinje uvozom Izaberi komponenta iz “reagirati-odabrati”. Definira an opcije niz s tri objekta, svaki s a vrijednost i a označiti vlasništvo. Svojstvo value predstavlja vrijednost koju će obrazac poslati pozadini kada ga pošaljete. Svojstvo oznake je tekst koji će komponenta Odabir prikazati u padajućem izborniku.

Kada renderirate komponentu Select, proslijedite joj niz opcija pomoću opcije oslonac

S ovim blokom koda, React Select biblioteka će generirati padajući izbornik poput ovog:

Prilagodba odabranih ulaza

React Select pruža razne načine za prilagodbu odabranih ulaza. Možete koristiti CSS klase ili primijeniti ugrađene stilove izravno na odabrane unose, prema vašim željama.

Prilagodba s CSS klasama

Biblioteka React Select pruža a naziv klase oslonac za Izaberi komponenta. Koristite ovaj rekvizit className primijeniti prilagođeni Cascading Style Sheet (CSS) stilove na svoje Select komponente.

Na primjer:

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 (






exportdefault App

Gornji blok koda sličan je prethodnom, ali koristi naziv klase prop za primjenu prilagođene CSS klase na Izaberi komponenta. Navedite naziv u prop className i možete ga koristiti za primjenu CSS stilova na komponentu:

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

Nakon definiranja stilova, vaš odabrani unos izgledat će ovako:

Prilagodba s ugrađenim stilovima

Također možete definirati ugrađene stilove u objektu koji prolazite kroz stilovi oslonac od Izaberi komponenta. To vam daje veću kontrolu nad stilom pojedinačnih elemenata.

Evo primjera:

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

Prop objekt, customStyles, sadrži svojstva stila za komponente Select kontrolirati, opcija, i Jelovnik dijelovi. Ova svojstva su funkcije koje uzimaju dva argumenta: baseStyles i država.

Parametar baseStyles predstavlja zadane stilove koje nudi React Select, dok parametar stanja predstavlja trenutno stanje elementa. U ovom primjeru, funkcije koriste operator spreada za kombiniranje osnovnih stilova s ​​dodatnim stilovima za svaki dio komponente.

Nakon primjene ovih stilova, vaš odabrani unos trebao bi izgledati ovako:

Dodavanje funkcionalnosti odabranim ulazima

React Select pruža nekoliko značajki za poboljšanje funkcionalnosti odabranih ulaza. Možete omogućiti višestruki odabir i funkciju pretraživanja, pa čak i stvoriti prilagođene padajuće komponente.

Funkcionalnost višestrukog odabira

Da biste omogućili funkciju višestrukog odabira u svojim padajućim izbornicima, proslijedite isMulti prop na komponentu Select. To korisnicima omogućuje odabir više opcija s padajućeg izbornika.

Na primjer:

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

Ovaj primjer pokazuje kako koristiti isMulti prop za dodavanje funkcije višestrukog odabira vašim odabranim ulazima.

Funkcionalnost pretraživanja

Biblioteka React Select pruža ugrađenu funkciju pretraživanja za jednostavno filtriranje opcija. Prema zadanim postavkama komponenta Odaberi prikazuje unos pretraživanja kada otvorite padajući izbornik. Korisnici mogu upisati unos za pretraživanje kako bi filtrirali dostupne opcije.

Da biste omogućili funkciju pretraživanja, prođite može se pretraživati oslonac za Izaberi komponenta. Poput isMulti prop, isSearchable prihvaća Booleovu vrijednost.

Evo primjera kako koristiti isSearchable prop za omogućavanje funkcije pretraživanja:

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

Renderiranje gornjeg bloka koda prikazat će odabrani unos s funkcijom pretraživanja. Izgledat će i funkcionirati ovako:

Stvorite prilagođene padajuće komponente

React Select vam omogućuje stvaranje prilagođenih padajućih komponenti pomoću komponente prop. Možete nadjačati zadane komponente koje nudi React Select i prilagoditi izgled i ponašanje padajućeg izbornika prema vašem ukusu.

Na primjer:

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

Ovaj blok koda pokazuje kako stvoriti prilagođene komponente za odabrani unos pomoću komponente oslonac od Izaberi komponenta. Uvozi komponente objekt koji je zbirka unaprijed definiranih komponenti koje možete koristiti za prilagodbu izgleda i ponašanja različitih elemenata u odabranim ulazima.

Kodeks definira dvije funkcionalne komponente: CustomOption i CustomDropdownIndicator. Komponenta CustomOption uzima objekt kao parametar. Ovaj objekt sadrži različita svojstva koja nudi React Select, npr innerProps i označiti.

Komponenta CustomDropdownIndicator uzima rekviziti kao parametar. Ova komponenta prikazuje prilagođeni padajući indikator sa simbolom strelice prema dolje. Kod stvara a customComponents objekt koji preslikava CustomOption i CustomDropdownIndicator komponente na odgovarajuće Opcija i Padajući indikator ključevi.

Konačno, ovaj kod prosljeđuje customComponents objekt u komponentu komponente Select komponente. Ovo će prikazati odabrani unos s prilagođenim komponentama, koji izgleda ovako:

Standardne komponente mogu biti snažnije i privlačnije

React Select moćna je biblioteka koja vam omogućuje stvaranje lijepih i elegantnih odabranih unosa u Reactu. Možete prilagoditi odabrane unose, dodati im funkcionalnost i izraditi prilagođene komponente padajućeg izbornika. Koristeći prednosti ove biblioteke, možete poboljšati izgled i korisničko iskustvo svojih React aplikacija.