Lag vakre rullegardiner med React Select

En valgt inngang er en nyttig nettapp-komponent som lar deg velge en verdi fra mange alternativer uten å ta opp mye plass. Men standardstylingen kan være kjedelig og kollidere med resten av designet ditt.

React Select gir en fleksibel og tilpassbar løsning for å forbedre utseendet og funksjonaliteten til rullegardininnganger.

Installerer React Select

Integrering av React med andre biblioteker eller teknologier, som React Select, React Redux og mange flere, kan forenkle utviklingsprosessen.

For å komme i gang med React Select, må du installere det i prosjektet ditt. Til gjør dette ved å bruke npm, kjør denne terminalkommandoen i prosjektkatalogen din:

npm i --save react-select

Dette vil installere og sette opp biblioteket i React-prosjektet ditt, slik at du kan begynne å bruke det.

Opprette Select-innganger med React Select

Nå som du har satt opp biblioteket, kan du bruke det til å lage utvalgte innganger. For å gjøre dette, bruker du

Plukke ut komponent. Dette er en svært tilpassbar komponent som lar brukere velge alternativer fra en liste.

Her er et eksempel på hvordan du bruker Select-komponenten:

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

Dette eksemplet begynner med å importere Plukke ut komponent fra "reagere-velg”. Den definerer en alternativer array med tre objekter, hver med en verdi og a merkelapp eiendom. Egenskapen value representerer verdien som skjemaet vil sende til backend når du sender det. Etikettegenskapen er teksten som Select-komponenten vil vise i rullegardinmenyen.

Når du gjengir Select-komponenten, sender du alternativmatrisen til den ved å bruke alternativer rekvisitt.

Med denne kodeblokken vil React Select-biblioteket generere en rullegardin som dette:

Tilpasse de utvalgte inngangene

React Select gir forskjellige måter å tilpasse utvalgte innganger på. Du kan bruke CSS-klasser eller bruke innebygde stiler direkte på de utvalgte inngangene, i henhold til dine preferanser.

Tilpasning med CSS-klasser

React Select-biblioteket gir en klassenavn rekvisitt for Plukke ut komponent. Bruk denne className prop å bruke tilpasset Cascading Style Sheet (CSS) stiler til dine utvalgte komponenter.

For eksempel:

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

Kodeblokken ovenfor ligner den forrige, men den bruker klassenavn prop for å bruke en tilpasset CSS-klasse på Plukke ut komponent. Angi et navn i className prop, og du kan bruke det til å bruke CSS-stiler på komponenten:

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

Etter å ha definert stilene, vil inndataene dine se slik ut:

Tilpasning med innebygde stiler

Du kan også definere innebygde stiler i et objekt som du sender via stiler rekvisitt av Plukke ut komponent. Dette gir deg mer kontroll over stilen til individuelle elementer.

Her er et eksempel:

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

Rekvisittobjektet, tilpassede stiler, inneholder stilegenskaper for Select-komponenten kontroll, alternativ, og Meny deler. Disse egenskapene er funksjoner som tar to argumenter: basestiler og stat.

BaseStyles-parameteren representerer standardstilene gitt av React Select, mens tilstandsparameteren representerer elementets nåværende tilstand. I dette eksemplet bruker funksjonene spredningsoperatoren til å kombinere baseStyles med ekstra stiler for hver del av komponenten.

Etter å ha brukt disse stilene, skal den valgte inndata se slik ut:

Legge til funksjonalitet til utvalgte innganger

React Select gir flere funksjoner for å forbedre funksjonaliteten til utvalgte innganger. Du kan aktivere flervalgs- og søkefunksjonalitet, og til og med lage tilpassede rullegardinkomponenter.

Multi-Select-funksjonalitet

For å aktivere flervalgsfunksjonalitet i rullegardinmenyene dine, bestå erMulti prop til Select-komponenten. Dette lar brukere velge flere alternativer fra rullegardinmenyen.

For eksempel:

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

Dette eksemplet viser hvordan du bruker erMulti prop for å legge til flervalgsfunksjonalitet til dine utvalgte innganger.

Søkefunksjonalitet

React Select-biblioteket har innebygd søkefunksjonalitet for enkelt å filtrere alternativer. Som standard viser Select-komponenten søkeinndata når du åpner rullegardinmenyen. Brukere kan skrive inn søkeinndata for å filtrere de tilgjengelige alternativene.

For å aktivere søkefunksjonalitet, bestå er søkbar støtte til Plukke ut komponent. Som erMulti prop, isSearchable godtar en boolsk verdi.

Her er et eksempel på hvordan du bruker isSearchable-rekvisitten for å aktivere søkefunksjonalitet:

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

Å gjengi kodeblokken ovenfor vil vise en valgt inngang med søkefunksjonalitet. Det vil se ut og fungere slik:

Lag egendefinerte dropdown-komponenter

React Select lar deg lage egendefinerte nedtrekkskomponenter ved å bruke komponentpropen. Du kan overstyre standardkomponentene levert av React Select og tilpasse utseendet og oppførselen til rullegardinmenyen for å passe din smak.

For eksempel:

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

Denne kodeblokken viser hvordan du oppretter tilpassede komponenter for en valgt inngang ved å bruke komponenter rekvisitt av Plukke ut komponent. Den importerer komponenter objekt som er en samling av forhåndsdefinerte komponenter du kan bruke til å tilpasse utseendet og oppførselen til ulike elementer i dine utvalgte innganger.

Koden definerer to funksjonelle komponenter: CustomOption og CustomDropdownIndicator. CustomOption-komponenten tar et objekt som en parameter. Dette objektet inneholder ulike egenskaper som React Select gir, som indreProps og merkelapp.

CustomDropdownIndicator-komponenten tar Rekvisitter som en parameter. Denne komponenten gjengir en egendefinert rullegardinindikator med et pil nedover. Koden lager en tilpassede komponenter objekt som tilordner CustomOption- og CustomDropdownIndicator-komponentene til de tilsvarende Alternativ og Dropdown-indikator nøkler.

Til slutt sender denne koden customComponents-objektet til komponentpropen til Select-komponenten. Dette vil gjengi en valgt inngang med de tilpassede komponentene, som ser slik ut:

Standardkomponenter kan være kraftigere og mer attraktive

React Select er et kraftig bibliotek som lar deg lage vakre og stilige utvalgte innganger i React. Du kan tilpasse utvalgte innganger, legge til funksjonalitet til dem og lage egendefinerte rullegardinkomponenter. Ved å dra nytte av dette biblioteket kan du forbedre utseendet og brukeropplevelsen til React-appene dine.