Maak prachtige Dropdowns met React Select
Een select input is een handig webapp-onderdeel waarmee je een waarde kunt kiezen uit veel opties zonder veel ruimte in te nemen. Maar de standaard styling kan saai zijn en botsen met de rest van je ontwerp.
React Select biedt een aanpasbare en op maat gemaakte aanpak om zowel de visuele aantrekkingskracht als de prestaties van vervolgkeuzelementen te verbeteren en biedt ontwikkelaars veelzijdige hulpmiddelen om het ontwerp van gebruikersinterfaces te verbeteren.
React Select installeren
React integreren met verschillende aanvullende bibliotheken of technologieën kan de ontwikkelingsworkflow stroomlijnen door naadloze integratie tussen deze componenten. Voorbeelden van dergelijke integraties zijn onder andere React Select en React Redux, die een uniforme aanpak bieden voor het beheren van complexe functionaliteit binnen applicaties.
Om React Select in een project te kunnen gebruiken, moet het als een installatie in het bestaande project worden opgenomen. Om dit te doen via de pakketbeheerder npm, navigeert u naar de hoofdmap van het project en voert u het volgende commando uit vanaf de terminal:
npm i --save react-select
Het bovenstaande proces vergemakkelijkt de integratie van de gespecificeerde bibliotheek in je React-applicatie, waardoor het gebruik ervan mogelijk wordt.
Select Inputs Creëren met React Select
Zodra de bibliotheek is opgezet, maakt het gebruik ervan het genereren van select input-elementen mogelijk door gebruik te maken van het veelzijdige en configureerbare Select-component. Met dit onderdeel kan de gebruiker kiezen uit een reeks beschikbare keuzes.
De meegeleverde code demonstreert de implementatie van het React Native Select component, waarmee gebruikers een of meer opties uit een lijst kunnen selecteren. Het element wordt gebruikt voor het invoeren van tekst als input voor het filteren van resultaten op basis van door de gebruiker ingevoerde trefwoorden. Wanneer de knop “Enter” wordt ingedrukt, worden de gefilterde gegevens weergegeven in een vervolgkeuzemenu onder de zoekbalk zodat de gebruiker ze kan selecteren.
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
In deze illustratie importeren we de component ‘Select’ uit de bibliotheek ‘react-select’. Vervolgens maken we een opties-array die drie objecten bevat, waarbij elk object twee eigenschappen heeft - het ‘value’-attribuut en het ’label’-attribuut. Het ‘value’-attribuut geeft de gegevens aan die bij het verzenden van het formulier naar de server worden verzonden, terwijl het ’label’-attribuut de tekst aangeeft die in de vervolgkeuzelijst wordt weergegeven.
Bij het renderen van de component Select is het essentieel om een lijst met opties als invoer te bieden door de eigenschap “options” te gebruiken.Hierdoor kan het component effectief functioneren en de gewenste keuzemogelijkheden voor gebruikers weergeven.
Met dit codeblok kan de React Select-bibliotheek worden gebruikt om een keuzemenu te maken met het volgende uiterlijk:
De selecties aanpassen
React Select biedt een groot aantal opties om het uiterlijk en de functionaliteit van de select-elementen aan te passen door CSS-klassen te gebruiken of door inline stylingtechnieken toe te passen die het beste passen bij de ontwerpvoorkeuren van de gebruiker.
Aanpassen met CSS-klassen
De React Select-bibliotheek biedt een className eigenschap voor het Select component, waarmee gebruikers gepersonaliseerde Cascading Style Sheets (CSS) kunnen toevoegen aan hun select-elementen.
Bijvoorbeeld:
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
Het bijgevoegde codefragment demonstreert een voorbeeld van de syntaxis van de JavaScript-programmeertaal. Het heeft betrekking op HTML-elementen en hun respectieve attributen. Het illustreert specifiek het gebruik van het className attribuut binnen het element, waarmee aangepaste CSS-klassen kunnen worden toegepast door een unieke identificatiestring als waarde op te geven. Hierdoor kan de styling van het visuele uiterlijk van het weergegeven component worden aangepast.
.select {
color: #333333;
font-family: cursive;
inline-size: 30%;
font-size: 11px;
}
Na het instellen van deze stijlen ziet je select-invoer er als volgt uit:
Aanpassen met inline stijlen
Je kunt ook inline stijlen implementeren door ze op te nemen in een stijlobject dat vervolgens wordt doorgegeven als parameter aan de eigenschap “stijlen” die is gekoppeld aan de component “Selecteren”. Een dergelijke benadering biedt meer flexibiliteit en precisie bij het regelen van het uiterlijk van specifieke componenten.
Hier is een voorbeeld:
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
Het customStyles object in TypeScript dient als een opslagplaats van stilistische eigenschappen die specifiek zijn afgestemd op de verschillende componenten in de React Select bibliotheek. Deze stijlen worden ingekapseld in functies die twee parameters accepteren - baseStyles , die een overerfbare set van standaardeigenschappen vertegenwoordigen, en state , die de huidige configuratie of status van het element in kwestie aangeeft. Door deze aanpak te gebruiken, kunnen ontwikkelaars gemakkelijk verschillende visuele kenmerken wijzigen en toepassen op de elementen Control, Option en Menu van de component Select.
De parameter baseStyles geeft de standaard ontwerpkenmerken aan die worden geleverd door React Select, terwijl de parameter state de huidige toestand van het component aangeeft. Hierin gebruiken beide de spread operator in combinatie om de eerder genoemde basisvormgevingskenmerken samen te voegen met aanvullende visuele configuraties voor elk deel van de interface.
Na de implementatie van deze stilistische aanpassingen zal je geselecteerde invoerveld een presentatie vertonen die lijkt op het onderstaande voorbeeld:
Functionaliteit toevoegen aan de select-ingangen
React Select biedt een aantal mogelijkheden die het nut van select-elementen vergroten. Hiertoe behoren de mogelijkheid om meerdere selectie- en zoekfuncties te implementeren, evenals het maken van op maat gemaakte vervolgkeuzemenu’s.
Multi-Select Functionaliteit
Om gebruikers de mogelijkheid te geven om meerdere keuzes te selecteren in een vervolgkeuzelijst, kun je het “isMulti” attribuut als parameter meegeven aan het Select element. Hierdoor kunnen gebruikers meer dan één optie kiezen uit de weergegeven alternatieven.
Bijvoorbeeld:
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
Deze illustratie toont de implementatie van de eigenschap “isMulti”, die multiselectiemogelijkheden voor select-invoerelementen mogelijk maakt.
Zoekfunctionaliteit
De React Select-bibliotheek biedt een handige zoekfunctie die inherent is geïntegreerd in de Select-component. Bij het openen van de vervolgkeuzelijst toont het Select-component standaard de zoekingang zodat gebruikers deze direct kunnen gebruiken. Daarna kunnen gebruikers hun gewenste zoekopdracht invoeren via de zoekingang om de weergegeven opties efficiënt te beperken op basis van hun specifieke criteria.
Om zoekmogelijkheden toe te kennen aan de component Select, moet u de eigenschap “isSearchable” een Booleaanse waarde geven. Deze actie is vergelijkbaar met het verstrekken van de eigenschap “isMulti”, waarvoor ook een booleaanse invoer nodig is.
Bekijk het volgende codefragment, waarin de implementatie wordt gedemonstreerd van de eigenschap isSearchable voor het inschakelen van zoekfuncties in een React-component:
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
Het codeblok produceert bij rendering een HTML-element van het type “select” dat de mogelijkheid biedt om zoekopdrachten uit te voeren via het vervolgkeuzemenu.Het uiterlijk en gedrag van dit element ziet er als volgt uit:
Aangepaste vervolgkeuzemenu’s maken
React Select biedt een veelzijdige benadering voor het maken van vervolgkeuzemenu’s op maat via de componenteigenschap, waarmee gebruikers de standaardopties van React Select kunnen aanpassen met persoonlijke stijlen en functies die aansluiten bij individuele voorkeuren.
Bijvoorbeeld:
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
De meegeleverde code illustreert het proces voor het maken van op maat gemaakte componenten voor een vervolgkeuzemenu met behulp van de eigenschap “components” van het element “Select”. Om dit te bereiken wordt het object “components” geïmporteerd, dat dient als een verzameling geprefabriceerde componenten waarmee verschillende visuele aspecten en functies van vervolgkeuzemenu’s kunnen worden gepersonaliseerd.
CustomOption en CustomDropdownIndicator. De eerste component accepteert een argument in de vorm van een object dat verschillende eigenschappen bevat die typisch zijn voor React Select, zoals innerProps en label.
De CustomDropdownIndicator component accepteert parameters in de vorm van prop(s). Het is verantwoordelijk voor het renderen van een aangepaste dropdown indicator met een iconische naar beneden gerichte pijl. Om dit te bereiken, maakt het gebruik van een customComponents object dat een correspondentie vastlegt tussen de CustomOption en CustomDropdownIndicator componenten door ze toe te wijzen aan hun respectievelijke Option en DropdownIndicator toetsen.
Uiteindelijk draagt dit script het object customComponents over naar de eigenschap components van het element Select . Bijgevolg genereert het een select-ingang met de aangepaste componenten zoals hieronder afgebeeld:
Standaardcomponenten kunnen krachtiger en aantrekkelijker zijn
React Select is een geavanceerde tool waarmee ontwikkelaars visueel aantrekkelijke en goed ontworpen select-ingangen kunnen maken binnen het raamwerk van React. De bibliotheek biedt flexibiliteit voor het aanpassen van het uiterlijk van deze invoerelementen en het toevoegen van functionaliteiten om aan specifieke eisen te voldoen. Door React Select te gebruiken, kan men de visuele aantrekkingskracht en algehele gebruikersinteractie van hun React-applicaties aanzienlijk verbeteren.