Ravviva i tuoi noiosi menu a discesa con questa libreria React flessibile.
Un input di selezione è un utile componente dell'app Web che ti consente di scegliere un valore da molte opzioni senza occupare molto spazio. Ma lo stile predefinito può essere noioso e scontrarsi con il resto del tuo design.
React Select fornisce una soluzione flessibile e personalizzabile per migliorare l'aspetto e la funzionalità degli input a discesa.
Installazione di React Select
Integrazione di React con altre librerie o tecnologie, come React Select, React Redux e molti altri, possono semplificare il processo di sviluppo.
Per iniziare con React Select, devi installarlo nel tuo progetto. A fallo usando npm, esegui questo comando da terminale nella directory del tuo progetto:
npm i --save react-select
Questo installerà e configurerà la libreria nel tuo progetto React, così potrai iniziare a usarla.
Creazione di input selezionati con React Select
Ora che hai impostato la libreria, puoi usarla per creare input selezionati. Per fare ciò, utilizzerai il file
Selezionare componente. Si tratta di un componente altamente personalizzabile che consente agli utenti di selezionare opzioni da un elenco.Ecco un esempio di come utilizzare il componente Seleziona:
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
Questo esempio inizia importando il file Selezionare componente da "reagire-selezionare”. Definisce un opzioni array con tre oggetti, ciascuno con a valore e un etichetta proprietà. La proprietà value rappresenta il valore che il modulo invierà al backend quando lo invii. La proprietà label è il testo che il componente Seleziona visualizzerà nel menu a discesa.
Quando esegui il rendering del componente Select, passagli l'array di opzioni utilizzando il comando opzioni puntello.
Con questo blocco di codice, la libreria React Select genererà un menu a discesa come questo:
Personalizzazione degli ingressi selezionati
React Select offre vari modi per personalizzare gli input selezionati. Puoi utilizzare le classi CSS o applicare stili in linea direttamente agli input selezionati, in base alle tue preferenze.
Personalizzazione con classi CSS
La libreria React Select fornisce a nome della classe sostegno per il Selezionare componente. Usa questa prop className per applicare fogli di stile a cascata (CSS) personalizzati stili ai componenti Select.
Per esempio:
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
Il blocco di codice sopra è simile al precedente, ma utilizza il file nome della classe prop per applicare una classe CSS personalizzata al file Selezionare componente. Fornisci un nome nella prop className e puoi usarlo per applicare gli stili CSS al componente:
.select {
color: #333333;
font-family: cursive;
inline-size: 30%;
font-size: 11px;
}
Dopo aver definito gli stili, l'input selezionato sarà simile al seguente:
Personalizzazione con stili in linea
Puoi anche definire stili in linea in un oggetto che passi tramite il file stili sostegno del Selezionare componente. Ciò ti dà un maggiore controllo sullo stile dei singoli elementi.
Ecco un esempio:
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
L'oggetto prop, customStyles, contiene le proprietà di stile per il componente Seleziona controllo, opzione, E menù parti. Queste proprietà sono funzioni che accettano due argomenti: baseStyles E stato.
Il parametro baseStyles rappresenta gli stili predefiniti forniti da React Select, mentre il parametro state rappresenta lo stato corrente dell'elemento. In questo esempio, le funzioni utilizzano l'operatore spread per combinare i baseStyles con stili aggiuntivi per ciascuna parte del componente.
Dopo aver applicato questi stili, l'input selezionato dovrebbe assomigliare a questo:
Aggiunta di funzionalità agli ingressi selezionati
React Select fornisce diverse funzionalità per migliorare la funzionalità degli input selezionati. Puoi abilitare funzionalità di selezione multipla e ricerca e persino creare componenti a discesa personalizzati.
Funzionalità di selezione multipla
Per abilitare la funzionalità di selezione multipla nei menu a discesa, passa il file èMulti prop al componente Seleziona. Ciò consente agli utenti di selezionare più opzioni dal menu a discesa.
Per esempio:
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
Questo esempio dimostra come utilizzare il file èMulti prop per aggiungere la funzionalità di selezione multipla agli input selezionati.
Funzionalità di ricerca
La libreria React Select fornisce funzionalità di ricerca integrata per filtrare facilmente le opzioni. Per impostazione predefinita, il componente Seleziona visualizza l'input di ricerca quando si apre il menu a discesa. Gli utenti possono digitare l'input di ricerca per filtrare le opzioni disponibili.
Per abilitare la funzionalità di ricerca, passare il file è ricercabile prop al Selezionare componente. Come il èMulti prop, isSearchable accetta un valore booleano.
Ecco un esempio di come utilizzare la prop isSearchable per abilitare la funzionalità di ricerca:
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
Il rendering del blocco di codice sopra mostrerà un input selezionato con funzionalità di ricerca. Avrà l'aspetto e il funzionamento in questo modo:
Crea componenti a discesa personalizzati
React Select ti consente di creare componenti a discesa personalizzati utilizzando la prop dei componenti. Puoi sovrascrivere i componenti predefiniti forniti da React Select e personalizzare l'aspetto e il comportamento del menu a discesa in base ai tuoi gusti.
Per esempio:
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
Questo blocco di codice mostra come creare componenti personalizzati per un input selezionato utilizzando il file componenti sostegno del Selezionare componente. Importa il componenti oggetto che è una raccolta di componenti predefiniti che puoi utilizzare per personalizzare l'aspetto e il comportamento di vari elementi negli input selezionati.
Il codice definisce due componenti funzionali: Opzione personalizzata E Indicatore Dropdown personalizzato. Il componente CustomOption accetta un oggetto come parametro. Questo oggetto contiene varie proprietà fornite da React Select, come innerProps E etichetta.
Il componente CustomDropdownIndicator richiede oggetti di scena come parametro. Questo componente esegue il rendering di un indicatore a discesa personalizzato con un simbolo di freccia rivolta verso il basso. Il codice crea a componenti personalizzati oggetto che mappa i componenti CustomOption e CustomDropdownIndicator al corrispondente Opzione E Indicatore a discesa chiavi.
Infine, questo codice passa l'oggetto customComponents alla prop Components del componente Select. Ciò renderà un input selezionato con i componenti personalizzati, simile a questo:
I componenti standard possono essere più potenti e attraenti
React Select è una potente libreria che ti consente di creare input di selezione belli ed eleganti in React. Puoi personalizzare gli input selezionati, aggiungere funzionalità e creare componenti a discesa personalizzati. Sfruttando questa libreria, puoi migliorare l'aspetto e l'esperienza utente delle tue app React.