Skapa vackra dropdowns med React Select

En vald ingång är en användbar webbappskomponent som låter dig välja ett värde från många alternativ utan att ta upp mycket utrymme. Men standardstylingen kan vara tråkig och krocka med resten av din design.

React Select tillhandahåller en flexibel och anpassningsbar lösning för att förbättra utseendet och funktionaliteten hos dropdown-ingångar.

Installerar React Select

Integrering av React med andra bibliotek eller teknologier, som React Select, React Redux och många fler, kan förenkla utvecklingsprocessen.

För att komma igång med React Select måste du installera det i ditt projekt. Till gör detta med npm, kör det här terminalkommandot i din projektkatalog:

npm i --save react-select

Detta kommer att installera och ställa in biblioteket i ditt React-projekt, så att du kan börja använda det.

Skapa Select-ingångar med React Select

Nu när du har ställt in biblioteket kan du använda det för att skapa utvalda ingångar. För att göra detta använder du

Välj komponent. Detta är en mycket anpassningsbar komponent som låter användare välja alternativ från en lista.

Här är ett exempel på hur du använder 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

Det här exemplet börjar med att importera Välj komponent från "reagera-välj”. Den definierar en alternativ array med tre objekt, var och en med en värde och a märka fast egendom. Egenskapen value representerar värdet som formuläret skickar till backend när du skickar in det. Etikettegenskapen är texten som Select-komponenten kommer att visa i rullgardinsmenyn.

När du renderar Select-komponenten skickar du alternativarrayen till den med hjälp av alternativ stötta.

Med detta kodblock kommer React Select-biblioteket att generera en rullgardinsmeny så här:

Anpassa de valda ingångarna

React Select erbjuder olika sätt att anpassa valda ingångar. Du kan använda CSS-klasser eller tillämpa inline-stilar direkt på de valda ingångarna, enligt dina preferenser.

Anpassning med CSS-klasser

React Select-biblioteket tillhandahåller en klassnamn rekvisita för Välj komponent. Använd denna className prop för att tillämpa anpassad Cascading Style Sheet (CSS) stilar till dina Select-komponenter.

Till exempel:

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

Kodblocket ovan liknar det föregående, men det använder klassnamn prop för att tillämpa en anpassad CSS-klass på Välj komponent. Ange ett namn i className-propet så kan du använda det för att tillämpa CSS-stilar på komponenten:

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

När du har definierat stilarna kommer din valda inmatning att se ut så här:

Anpassa med inline-stilar

Du kan också definiera inline-stilar i ett objekt som du skickar via stilar rekvisita av Välj komponent. Detta ger dig mer kontroll över stilen på enskilda element.

Här är ett exempel:

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

Rekvisitaobjektet, anpassade stilar, innehåller stilegenskaper för Select-komponenten kontrollera, alternativ, och meny delar. Dessa egenskaper är funktioner som tar två argument: basstilar och stat.

Parametern baseStyles representerar standardstilarna som tillhandahålls av React Select, medan statusparametern representerar elementets aktuella tillstånd. I det här exemplet använder funktionerna spridningsoperatorn för att kombinera baseStyles med extra stilar för varje del av komponenten.

När du har tillämpat dessa stilar bör din valda inmatning se ut så här:

Lägga till funktionalitet till de valda ingångarna

React Select tillhandahåller flera funktioner för att förbättra funktionaliteten hos utvalda ingångar. Du kan aktivera flervals- och sökfunktioner och till och med skapa anpassade rullgardinskomponenter.

Flervalsfunktion

För att aktivera flervalsfunktioner i dina rullgardinsmenyer, skicka ärMulti prop till Select-komponenten. Detta låter användare välja flera alternativ från rullgardinsmenyn.

Till exempel:

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

Detta exempel visar hur man använder ärMulti prop för att lägga till flervalsfunktionen till dina valda ingångar.

Sökfunktionalitet

React Select-biblioteket har inbyggd sökfunktion för att enkelt filtrera alternativ. Som standard visar komponenten Välj sökinmatningen när du öppnar rullgardinsmenyn. Användare kan skriva in sökinmatningen för att filtrera de tillgängliga alternativen.

För att aktivera sökfunktionalitet, godkänn är sökbar stötta till Välj komponent. Som ärMulti prop, isSearchable accepterar ett booleskt värde.

Här är ett exempel på hur du använder isSearchable-rekvisiten för att aktivera sökfunktioner:

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

Genom att rendera kodblocket ovan visas en vald ingång med sökfunktionalitet. Det kommer att se ut och fungera så här:

Skapa anpassade rullgardinskomponenter

React Select låter dig skapa anpassade rullgardinskomponenter med hjälp av komponenters prop. Du kan åsidosätta standardkomponenterna från React Select och anpassa rullgardinsmenyns utseende och beteende för att passa din smak.

Till exempel:

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

Detta kodblock visar hur man skapar anpassade komponenter för en utvald ingång med hjälp av komponenter rekvisita av Välj komponent. Den importerar komponenter objekt som är en samling fördefinierade komponenter som du kan använda för att anpassa utseendet och beteendet hos olika element i dina valda ingångar.

Koden definierar två funktionella komponenter: CustomOption och CustomDropdownIndicator. CustomOption-komponenten tar ett objekt som en parameter. Detta objekt innehåller olika egenskaper som React Select tillhandahåller, t.ex innerProps och märka.

CustomDropdownIndicator-komponenten tar rekvisita som en parameter. Den här komponenten återger en anpassad rullgardinsindikator med en nedåtriktad pilsymbol. Koden skapar en anpassade komponenter objekt som mappar komponenterna CustomOption och CustomDropdownIndicator till motsvarande Alternativ och DropdownIndikator nycklar.

Slutligen skickar den här koden customComponents-objektet till komponenternas prop för Select-komponenten. Detta kommer att återge en utvald ingång med de anpassade komponenterna, som ser ut så här:

Standardkomponenter kan vara mer kraftfulla och attraktiva

React Select är ett kraftfullt bibliotek som låter dig skapa vackra och snygga utvalda ingångar i React. Du kan anpassa de valda ingångarna, lägga till funktionalitet till dem och skapa anpassade rullgardinskomponenter. Genom att dra nytta av det här biblioteket kan du förbättra utseendet och användarupplevelsen av dina React-appar.