Skapa vackra rullgardinsmenyer med React Select
En select-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 standardutformningen kan vara tråkig och krocka med resten av din design.
React Select erbjuder en anpassningsbar och skräddarsydd metod för att höja både det visuella intrycket och prestandan för rullgardinsmenyer, vilket ger utvecklare mångsidiga verktyg för att förbättra designen av användargränssnitt.
Installera React Select
Att integrera React med olika ytterligare bibliotek eller tekniker kan effektivisera utvecklingsarbetsflödet genom att tillhandahålla sömlös integration mellan dessa komponenter. Exempel på sådana integrationer är bland annat React Select och React Redux, som erbjuder en enhetlig metod för att hantera komplexa funktioner i applikationer.
För att börja använda React Select i ett projekt måste man införliva det som en installation i sitt befintliga projekt. För att göra detta via pakethanteraren npm, navigera till projektets rotkatalog och utför följande kommando från terminalen:
npm i --save react-select
Ovanstående process underlättar integrationen av det angivna biblioteket i din React-applikation och gör det därmed möjligt att använda det.
Skapa Select-ingångar med React Select
När biblioteket har upprättats kan du använda det för att skapa Select-ingångselement genom att använda den mångsidiga och konfigurerbara Select-komponenten. Denna komponent underlättar användarens val från en rad tillgängliga alternativ.
Den medföljande koden visar implementeringen av React Native Select -komponenten, som gör att användare kan välja ett eller flera alternativ från en lista. Elementet används för att ange text som indata för filtrering av resultat baserat på nyckelord som användaren skriver in. När användaren trycker på knappen “Enter” visas de filtrerade uppgifterna i en rullgardinsmeny under sökfältet som användaren kan välja mellan.
import React from "react"
import Select from "react-select"
function App() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
]
return (
<div>
<Select options={options} />
</div>
)
}
export default App
I den här illustrationen importerar vi komponenten “Select” från biblioteket “react-select”. Vi skapar sedan en alternativmatris som innehåller tre objekt, där varje objekt har två egenskaper - attributet “värde” och attributet “etikett”. Attributet “value” anger de data som ska överföras till servern när formuläret skickas in, medan attributet “label” anger den text som visas i rullgardinsmenyn.
Vid rendering av Select-komponenten är det viktigt att tillhandahålla en lista med alternativ som indata genom att använda egenskapen “options”.Detta gör att komponenten kan fungera effektivt och visa önskade valmöjligheter för användarna.
Detta kodblock gör det möjligt att använda React Select-biblioteket för att skapa en meny med följande utseende:
Anpassa Select-ingångarna
React Select erbjuder en mängd olika alternativ för att anpassa utseende och funktionalitet för sina Select-element genom att använda CSS-klasser eller använda inline styling-teknik som passar bäst för ens designpreferenser.
Anpassning med CSS-klasser
React Select-biblioteket erbjuder en egenskap className för komponenten Select , som gör det möjligt för användare att ge personliga Cascading Style Sheets (CSS) till sina val av utvalda element.
Till exempel:
import React from "react"
import Select from "react-select"
function App() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
]
return (
<div>
<Select options={options} className='select'/>
</div>
)
}
export default App
Det medföljande kodavsnittet visar ett exempel på syntaxen i programmeringsspråket JavaScript. Det handlar om HTML-element och deras respektive attribut. Specifikt illustrerar det användningen av className -attributet inom -elementet, vilket möjliggör tillämpning av anpassade CSS-klasser genom tillhandahållandet av en unik identifieringssträng som dess värde. Denna praxis möjliggör stylinganpassningar av det visuella utseendet på den renderade komponenten.
.select {
color: #333333;
font-family: cursive;
inline-size: 30%;
font-size: 11px;
}
Efter att dessa stilar har skapats kommer inmatningsalternativet select att se ut på följande sätt:
Anpassning med inline-stilar
Alternativt kan man implementera inline-stilar genom att införliva dem i ett stylingobjekt som sedan skickas som en parameter till egenskapen “styles” som är associerad med komponenten “Select”. Ett sådant tillvägagångssätt ger större flexibilitet och precision vid kontroll av utseendet på specifika komponenter.
Här är ett exempel:
import React from "react"
import Select from "react-select"
function App() {
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>
<Select options={options} styles={customStyles} />
</div>
)
}
export default App
Objektet customStyles i TypeScript fungerar som en lagringsplats för stilistiska egenskaper som skräddarsytts specifikt för de olika komponenterna i React Select-biblioteket. Dessa stilar är inkapslade i funktioner som accepterar två parametrar - baseStyles , som representerar en ärftlig uppsättning standardattribut, och state , som anger den aktuella konfigurationen eller statusen för elementet i fråga. Genom att använda detta tillvägagångssätt kan utvecklare enkelt modifiera och tillämpa distinkta visuella egenskaper för kontroll-, alternativ- och menyelementen i Select-komponenten.
Parametern baseStyles anger de standarddesignattribut som tillhandahålls av React Select, medan parametern state anger det aktuella tillståndet för komponenten. Här använder båda spread-operatorn i tandem för att sammanfoga de ovannämnda basstylingfunktionerna tillsammans med ytterligare visuella konfigurationer för varje sektion i gränssnittet.
Efter implementeringen av dessa stilistiska justeringar kommer ditt valda inmatningsfält att visa en presentation som liknar exemplet nedan:
Lägga till funktionalitet till Select-ingångarna
React Select erbjuder en rad funktioner som ökar nyttan med select-element. Bland dessa finns möjligheten att implementera flera urval och sökfunktioner, samt att skapa skräddarsydda rullgardinsmenyer.
Funktionalitet för flera val
För att ge användare möjlighet att välja flera alternativ i en rullgardinslista kan du ange attributet “isMulti” som en parameter till Select-elementet. På så sätt kan individer välja mer än ett alternativ från de alternativ som visas.
Till exempel:
import React from "react"
import Select from "react-select"
function App() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
{ value: "grapes", label: "Grapes" },
{ value: "orange", label: "Orange" },
]
return (
<div>
<Select options={options} isMulti />
</div>
)
}
export default App
Denna illustration visar implementeringen av egenskapen “isMulti”, som möjliggör flervalsfunktioner för Select-ingångselement.
Sökfunktionalitet
React Select-biblioteket erbjuder en praktisk sökfunktion som är integrerad i Select-komponenten. När rullgardinsmenyn öppnas visar Select-komponentens standardbeteende sökinmatningen för omedelbar åtkomst för användarna. Därefter kan användaren ange sin önskade fråga via sökrutan för att effektivt begränsa de visade alternativen baserat på sina specifika kriterier.
För att ge Select-komponenten sökfunktioner ska du förse egenskapen “isSearchable” med ett booleskt värde. Denna åtgärd är parallell med tillhandahållandet av attributet “isMulti”, som också kräver en boolesk inmatning.
Betrakta följande kodavsnitt, som visar implementeringen av egenskapen isSearchable för att aktivera sökfunktioner i en React-komponent:
import React from "react"
import Select from "react-select"
function App() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "apricot", label: "Apricot" },
{ value: "mango", label: "Mango" },
{ value: "mangosteens", label: "Mangosteens" },
{ value: "avocado", label: "Avocado" },
]
return (
<div>
<Select options={options} isSearchable />
</div>
)
}
export default App
När kodblocket renderas skapas ett HTML-element av typen “select” som har möjlighet att utföra sökningar via sin rullgardinsmeny.Elementets utseende och beteende kommer att likna följande struktur:
Skapa anpassade rullgardinsmenyer
React Select erbjuder en mångsidig metod för att skapa skräddarsydda rullgardinsmenyer genom sin komponentegenskap, så att användarna kan ändra de standardalternativ som erbjuds av React Select med personliga stilar och funktioner som anpassas till individuella preferenser.
Till exempel:
import React from "react"
import Select, { components } from "react-select"
function App() {
const CustomOption = (obj) => (
<div {...obj.innerProps}>
<span>{obj.label}</span>
<span style={{ marginInlineStart: "0.2rem" }}>Fruit</span>
</div>
)
const CustomDropdownIndicator = (props) => (
<components.DropdownIndicator {...props}>
<span>↓</span>
</components.DropdownIndicator>
)
const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
]
const customComponents = {
Option: CustomOption,
DropdownIndicator: CustomDropdownIndicator,
}
return <Select options={options} components={customComponents} />
}
export default App
Den medföljande koden illustrerar processen att skapa skräddarsydda komponenter för en rullgardinsmeny med hjälp av egenskapen “components” för elementet “Select”. För att uppnå detta importeras objektet “components”, som fungerar som en ansamling av prefabricerade komponenter som underlättar anpassningen av olika visuella aspekter och funktioner i samband med rullgardinsmenyer.
CustomOption och CustomDropdownIndicator. Den förstnämnda komponenten accepterar ett argument i form av ett objekt som innehåller flera egenskaper som vanligtvis tillhandahålls av React Select, t.ex. innerProps och label.
Komponenten CustomDropdownIndicator accepterar parametrar i form av prop(s). Den ansvarar för att rendera en anpassad rullgardinsindikator med en ikonisk pil som pekar nedåt. För att uppnå detta utnyttjar den ett customComponents-objekt som skapar en korrespondens mellan komponenterna CustomOption och CustomDropdownIndicator genom att mappa dem till sina respektive Option- och DropdownIndicator-nycklar.
I slutändan överför detta skript customComponents -objektet till components -egenskapen i Select -elementet. Följaktligen genereras en select-ingång med de anpassade komponenterna enligt nedan:
Standardkomponenter kan vara mer kraftfulla och attraktiva
React Select är ett avancerat verktyg som gör det möjligt för utvecklare att skapa visuellt tilltalande och väldesignade select-ingångar inom ramen för React. Biblioteket ger flexibilitet för att skräddarsy utseendet på dessa inmatningselement och lägga till funktioner för att uppfylla specifika krav. Genom att använda React Select kan man avsevärt förbättra det visuella intrycket och den övergripande användarinteraktionen med sina React-applikationer.