Erstellen Sie wunderschöne Dropdowns mit React Select

Eine Auswahleingabe ist eine nützliche Web-App-Komponente, mit der Sie einen Wert aus vielen Optionen auswählen können, ohne viel Platz zu beanspruchen. Der Standardstil kann jedoch langweilig sein und mit dem Rest Ihres Designs kollidieren.

React Select bietet eine flexible und anpassbare Lösung, um das Erscheinungsbild und die Funktionalität von Dropdown-Eingaben zu verbessern.

React Select installieren

React mit anderen Bibliotheken oder Technologien integrieren, wie React Select, React Redux und viele mehr, können den Entwicklungsprozess vereinfachen.

Um mit React Select zu beginnen, müssen Sie es in Ihrem Projekt installieren. Zu Tun Sie dies mit npm, führen Sie diesen Terminalbefehl in Ihrem Projektverzeichnis aus:

npm i --save react-select

Dadurch wird die Bibliothek in Ihrem React-Projekt installiert und eingerichtet, sodass Sie sie verwenden können.

Erstellen ausgewählter Eingaben mit React Select

Nachdem Sie die Bibliothek eingerichtet haben, können Sie sie zum Erstellen ausgewählter Eingaben verwenden. Dazu verwenden Sie die

Wählen Komponente. Hierbei handelt es sich um eine hochgradig anpassbare Komponente, mit der Benutzer Optionen aus einer Liste auswählen können.

Hier ist ein Beispiel für die Verwendung der Select-Komponente:

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

Dieses Beispiel beginnt mit dem Importieren von Wählen Komponente aus „Reagieren-Auswählen”. Es definiert eine Optionen Array mit drei Objekten, jedes mit a Wert und ein Etikett Eigentum. Die Eigenschaft value stellt den Wert dar, den das Formular an das Backend sendet, wenn Sie es absenden. Die Label-Eigenschaft ist der Text, den die Select-Komponente im Dropdown-Menü anzeigt.

Wenn Sie die Select-Komponente rendern, übergeben Sie das Optionsarray mithilfe von an sie Optionen Stütze.

Mit diesem Codeblock generiert die React Select-Bibliothek ein Dropdown-Menü wie dieses:

Anpassen der Auswahleingänge

React Select bietet verschiedene Möglichkeiten, die ausgewählten Eingaben anzupassen. Sie können je nach Ihren Vorlieben CSS-Klassen verwenden oder Inline-Stile direkt auf die ausgewählten Eingaben anwenden.

Anpassen mit CSS-Klassen

Die React Select-Bibliothek bietet eine Klassenname Stütze für die Wählen Komponente. Verwenden Sie diese Klassenname-Requisite So wenden Sie ein benutzerdefiniertes Cascading Style Sheet (CSS) an Stile für Ihre Select-Komponenten hinzufügen.

Zum Beispiel:

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

Der obige Codeblock ähnelt dem vorherigen, verwendet jedoch den Klassenname prop, um eine benutzerdefinierte CSS-Klasse auf die anzuwenden Wählen Komponente. Geben Sie einen Namen in der className-Requisite ein und Sie können ihn verwenden, um CSS-Stile auf die Komponente anzuwenden:

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

Nachdem Sie die Stile definiert haben, sieht Ihre ausgewählte Eingabe folgendermaßen aus:

Anpassen mit Inline-Stilen

Sie können auch Inline-Stile in einem Objekt definieren, das Sie über übergeben Stile Stütze des Wählen Komponente. Dadurch haben Sie mehr Kontrolle über den Stil einzelner Elemente.

Hier ist ein Beispiel:

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

Das Requisitenobjekt, benutzerdefinierteStile, enthält Stileigenschaften für die Select-Komponente Kontrolle, Möglichkeit, Und Speisekarte Teile. Diese Eigenschaften sind Funktionen, die zwei Argumente annehmen: baseStyles Und Zustand.

Der Parameter „baseStyles“ stellt die von React Select bereitgestellten Standardstile dar, während der Parameter „state“ den aktuellen Status des Elements darstellt. In diesem Beispiel verwenden die Funktionen den Spread-Operator, um die Basisstile mit zusätzlichen Stilen für jeden Teil der Komponente zu kombinieren.

Nachdem Sie diese Stile angewendet haben, sollte Ihre ausgewählte Eingabe so aussehen:

Hinzufügen von Funktionalität zu den ausgewählten Eingängen

React Select bietet mehrere Funktionen, um die Funktionalität ausgewählter Eingaben zu verbessern. Sie können die Mehrfachauswahl- und Suchfunktion aktivieren und sogar benutzerdefinierte Dropdown-Komponenten erstellen.

Multi-Select-Funktionalität

Um die Mehrfachauswahlfunktion in Ihren Dropdowns zu aktivieren, übergeben Sie die istMulti prop zur Select-Komponente. Dadurch können Benutzer mehrere Optionen aus dem Dropdown-Menü auswählen.

Zum Beispiel:

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

Dieses Beispiel zeigt die Verwendung von istMulti prop, um die Mehrfachauswahlfunktion zu Ihren ausgewählten Eingaben hinzuzufügen.

Suchfunktion

Die React Select-Bibliothek bietet integrierte Suchfunktionen zum einfachen Filtern von Optionen. Standardmäßig zeigt die Select-Komponente die Sucheingabe an, wenn Sie das Dropdown-Menü öffnen. Benutzer können die Sucheingabe eingeben, um die verfügbaren Optionen zu filtern.

Um die Suchfunktion zu aktivieren, übergeben Sie die ist durchsuchbar Stütze zum Wählen Komponente. Wie istMulti prop, isSearchable akzeptiert einen booleschen Wert.

Hier ist ein Beispiel für die Verwendung der isSearchable-Requisite zum Aktivieren der Suchfunktion:

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

Beim Rendern des obigen Codeblocks wird eine ausgewählte Eingabe mit Suchfunktion angezeigt. Es wird so aussehen und funktionieren:

Erstellen Sie benutzerdefinierte Dropdown-Komponenten

Mit React Select können Sie mithilfe der Komponenten-Requisite benutzerdefinierte Dropdown-Komponenten erstellen. Sie können die von React Select bereitgestellten Standardkomponenten überschreiben und das Erscheinungsbild und Verhalten des Dropdowns an Ihren Geschmack anpassen.

Zum Beispiel:

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

Dieser Codeblock zeigt, wie Sie mit dem benutzerdefinierte Komponenten für eine ausgewählte Eingabe erstellen Komponenten Stütze des Wählen Komponente. Es importiert die Komponenten -Objekt, bei dem es sich um eine Sammlung vordefinierter Komponenten handelt, mit denen Sie das Erscheinungsbild und Verhalten verschiedener Elemente in Ihren ausgewählten Eingaben anpassen können.

Der Code definiert zwei funktionale Komponenten: BenutzerdefinierteOption Und CustomDropdownIndicator. Die CustomOption-Komponente akzeptiert ein Objekt als Parameter. Dieses Objekt enthält verschiedene Eigenschaften, die React Select bereitstellt, wie z innerProps Und Etikett.

Die CustomDropdownIndicator-Komponente benötigt Requisiten als Parameter. Diese Komponente rendert einen benutzerdefinierten Dropdown-Indikator mit einem Abwärtspfeilsymbol. Der Code erstellt eine benutzerdefinierte Komponenten Objekt, das die CustomOption- und CustomDropdownIndicator-Komponenten den entsprechenden zuordnet Möglichkeit Und DropdownIndicator Schlüssel.

Schließlich übergibt dieser Code das customComponents-Objekt an die Components-Requisite der Select-Komponente. Dadurch wird eine ausgewählte Eingabe mit den benutzerdefinierten Komponenten gerendert, die wie folgt aussieht:

Standardkomponenten können leistungsfähiger und attraktiver sein

React Select ist eine leistungsstarke Bibliothek, mit der Sie schöne und stilvolle ausgewählte Eingaben in React erstellen können. Sie können die ausgewählten Eingaben anpassen, ihnen Funktionen hinzufügen und benutzerdefinierte Dropdown-Komponenten erstellen. Mithilfe dieser Bibliothek können Sie das Erscheinungsbild und die Benutzererfahrung Ihrer React-Apps verbessern.