Liv dine kedelige dropdowns op med dette fleksible React-bibliotek.

Et udvalgt input er en nyttig webapp-komponent, der lader dig vælge en værdi fra mange muligheder uden at optage meget plads. Men standardstylingen kan være kedelig og kollidere med resten af ​​dit design.

React Select giver en fleksibel og tilpasselig løsning til at forbedre udseendet og funktionaliteten af ​​dropdown-input.

Installerer React Select

Integration af React med andre biblioteker eller teknologier, ligesom React Select, React Redux og mange flere, kan forenkle udviklingsprocessen.

For at komme i gang med React Select skal du installere det i dit projekt. Til gør dette ved hjælp af npm, kør denne terminalkommando i din projektmappe:

npm i --save react-select

Dette vil installere og opsætte biblioteket i dit React-projekt, så du kan begynde at bruge det.

Oprettelse af Select-input med React Select

Nu hvor du har konfigureret biblioteket, kan du bruge det til at oprette udvalgte input. For at gøre dette skal du bruge

instagram viewer
Vælg komponent. Dette er en meget tilpasselig komponent, der lader brugere vælge muligheder fra en liste.

Her er et eksempel på, hvordan du bruger 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 eksempel begynder med at importere Vælg komponent fra "reagere-vælg”. Det definerer en muligheder array med tre objekter, hver med en værdi og en etiket ejendom. Egenskaben værdi repræsenterer den værdi, som formularen sender til backend, når du indsender den. Etiketegenskaben er den tekst, som komponenten Vælg vil vise i rullemenuen.

Når du gengiver Select-komponenten, skal du videregive valgmulighedsarrayet til den ved hjælp af muligheder rekvisit.

Med denne kodeblok vil React Select-biblioteket generere en dropdown som denne:

Tilpasning af de valgte indgange

React Select giver forskellige måder at tilpasse de valgte inputs på. Du kan bruge CSS-klasser eller anvende inline-stile direkte på de udvalgte input, alt efter dine præferencer.

Tilpasning med CSS-klasser

React Select-biblioteket giver en klassenavn rekvisit til Vælg komponent. Brug denne klassenavn prop at anvende brugerdefineret Cascading Style Sheet (CSS) stilarter til dine udvalgte 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 (






exportdefault App

Kodeblokken ovenfor ligner den forrige, men den bruger klassenavn prop til at anvende en brugerdefineret CSS-klasse til Vælg komponent. Angiv et navn i className prop, og du kan bruge det til at anvende CSS-stile til komponenten:

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

Efter at have defineret stilene, vil dit valgte input se sådan ud:

Tilpasning med inline-stile

Du kan også definere inline-stile i et objekt, som du sender via stilarter rekvisit af Vælg komponent. Dette giver dig mere kontrol over stilen af ​​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

Rekvisitobjektet, brugerdefinerede stilarter, indeholder stilegenskaber for Select-komponenten styring, mulighed, og menu dele. Disse egenskaber er funktioner, der tager to argumenter: baseStyles og stat.

baseStyles-parameteren repræsenterer standardstilene, der leveres af React Select, mens tilstandsparameteren repræsenterer elementets aktuelle tilstand. I dette eksempel bruger funktionerne spread-operatoren til at kombinere baseStyles med ekstra stilarter for hver del af komponenten.

Efter at have anvendt disse stilarter, skal dit valgte input se sådan ud:

Tilføjelse af funktionalitet til de valgte indgange

React Select giver flere funktioner til at forbedre funktionaliteten af ​​udvalgte inputs. Du kan aktivere multi-select og søgefunktionalitet og endda oprette tilpassede dropdown-komponenter.

Multi-Select funktionalitet

For at aktivere multi-select-funktionalitet i dine rullemenuer skal du videregive erMulti prop til Select-komponenten. Dette lader brugere vælge flere muligheder fra rullemenuen.

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 eksempel viser, hvordan man bruger erMulti prop for at tilføje multi-select-funktionaliteten til dine udvalgte input.

Søgefunktionalitet

React Select-biblioteket har indbygget søgefunktion for nemt at filtrere indstillinger. Som standard viser komponenten Vælg søgeinputtet, når du åbner rullemenuen. Brugere kan indtaste søgeinputtet for at filtrere de tilgængelige muligheder.

For at aktivere søgefunktionalitet skal du videregive er søgbar støtte til Vælg komponent. Ligesom erMulti prop, isSearchable accepterer en boolesk værdi.

Her er et eksempel på, hvordan du bruger isSearchable-rekvisitten til at aktivere søgefunktionalitet:

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

Gengivelse af kodeblokken ovenfor vil vise et udvalgt input med søgefunktionalitet. Det vil se ud og fungere sådan her:

Opret brugerdefinerede dropdown-komponenter

React Select giver dig mulighed for at oprette brugerdefinerede dropdown-komponenter ved hjælp af komponenternes prop. Du kan tilsidesætte standardkomponenterne fra React Select og tilpasse udseendet og adfærden af ​​rullemenuen, så den passer til din smag.

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 kodeblok viser, hvordan man opretter brugerdefinerede komponenter til et udvalgt input ved hjælp af komponenter rekvisit af Vælg komponent. Den importerer komponenter objekt, som er en samling af foruddefinerede komponenter, du kan bruge til at tilpasse udseendet og adfærden af ​​forskellige elementer i dine udvalgte input.

Koden definerer to funktionelle komponenter: CustomOption og CustomDropdownIndicator. CustomOption-komponenten tager et objekt som en parameter. Dette objekt indeholder forskellige egenskaber, som React Select giver, f.eks indreProps og etiket.

CustomDropdownIndicator-komponenten tager rekvisitter som en parameter. Denne komponent gengiver en brugerdefineret dropdown-indikator med et pil nedad. Koden opretter en brugerdefinerede komponenter objekt, der knytter CustomOption- og CustomDropdownIndicator-komponenterne til de tilsvarende Mulighed og Dropdown-indikator nøgler.

Til sidst sender denne kode customComponents-objektet til komponenternes prop i Select-komponenten. Dette vil gengive et udvalgt input med de brugerdefinerede komponenter, der ser sådan ud:

Standardkomponenter kan være mere kraftfulde og attraktive

React Select er et kraftfuldt bibliotek, der lader dig skabe smukke og stilfulde udvalgte inputs i React. Du kan tilpasse de udvalgte input, tilføje funktionalitet til dem og oprette brugerdefinerede dropdown-komponenter. Ved at udnytte dette bibliotek kan du forbedre udseendet og brugeroplevelsen af ​​dine React-apps.