Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision. Weiterlesen.

Das Hinzufügen eines Farbwählers zu einer React-App kann es für Benutzer viel einfacher machen, Entscheidungen über die Farben zu treffen, die sie verwenden möchten. Farbwähler sind ein großartiges Werkzeug für Benutzer, die mit einer Grafikanwendung oder einer App arbeiten, die Personalisierung unterstützt.

Die React-Color-Bibliothek bietet eine große Auswahl an Optionen und viele Farbauswahlstile, um Ihren Anforderungen gerecht zu werden.

Hinzufügen eines Farbwählers zu Ihrer App

Die React-Color-Bibliothek macht es einfach, Ihrer React-App einen Farbwähler hinzuzufügen. Diese Bibliothek bietet Benutzern eine einfache und intuitive Möglichkeit, Farben für ihre Anwendungen auszuwählen. Der Code ist einfach zu verwenden und bietet eine großartige Benutzererfahrung. Bevor Sie einen Farbwähler hinzufügen, müssen Sie dies tun Erstellen Sie eine einfache Reaktions-App.

instagram viewer

React-Color im Überblick

Die React-Color-Bibliothek ist eine großartige Möglichkeit, Ihrer React-App einen Farbwähler hinzuzufügen. Es bietet eine benutzerfreundliche Oberfläche, mit der Benutzer aus einer Reihe von Farben auswählen können. Die Bibliothek bietet auch Requisiten, mit denen Sie den Farbwähler anpassen können.

Der Code zum Hinzufügen einer Farbauswahl zu Ihrer React-App ist einfach. Um die React-Color-Bibliothek zu verwenden, müssen Sie zuerst die Bibliothek mit installieren npm, der Paketmanager für Node.js.

npm ich reagiere-farbe

Fügen Sie dann einfach den folgenden Code zu der Komponente hinzu, für die Sie die Farbauswahl anzeigen möchten:

importieren Reagieren aus'reagieren'
importieren {SketchPicker} aus'Reaktionsfarbe'
KlasseKomponenteerweitertReagieren.Komponente{
 rendern() {
zurückkehren<SketchPicker />
 }
}
ExportStandard Komponente

Der obige Code rendert eine einfache Farbauswahl. Benutzer können aus einer Reihe von Farben auswählen. Die Auswahl zeigt auch den HEX-Code der ausgewählten Farbe an, den Sie in anderen Teilen Ihrer App verwenden können.

Verfügbare Requisiten

Die React-Color-Bibliothek bietet Requisiten zum Anpassen des Farbwählers. Sie können diese Requisiten verwenden, um die Größe der Auswahl, die verfügbaren Farben und vieles mehr zu ändern.

Unten sind die verfügbaren Requisiten für den Farbwähler:

  • Breite: Die Breite des Farbwählers in Pixel.
  • Höhe: Die Höhe des Farbwählers in Pixel.
  • Farbe: Die anfängliche Farbe des Selektors.
  • bei Änderung: Eine Callback-Funktion, die ausgeführt wird, wenn sich die Farbe ändert.
  • onChangeComplete: Eine Rückruffunktion, die ausgeführt wird, wenn der Farbwechsel abgeschlossen ist.

Der folgende Code zeigt, wie alle verfügbaren Requisiten für den Farbwähler verwendet werden:

importieren Reagieren aus'reagieren'
importieren {SketchPicker} aus'Reaktionsfarbe'

KlasseKomponenteerweitertReagieren.Komponente{

 rendern() {
zurückkehren (
 Breite={200}
 Höhe={200}
 Farbe="#ff0000"
 onChange={(Farbe) => Konsole.log (Farbe)}
 onChangeComplete={(Farbe, Ereignis)=> Konsole.log (Farbe)}
 />
 )
 }
}
ExportStandard Komponente

Der obige Code rendert einen Farbwähler mit einer Breite von 200 Pixel, einer Höhe von 200 Pixel, einer Anfangsfarbe von #ff0000 und einer Farbpalette. Es zeigt auch ein Eingabefeld für den Farbcode und zeigt den Alphakanal an. Wenn sich die Farbe ändert, ruft es den onChange-Callback auf und protokolliert die neue Farbe in der Konsole.

Hinzufügen zusätzlicher Farbwähler

Die React-Color-Bibliothek bietet eine Reihe verschiedener Farbwähler zur Auswahl, und zusätzlich zu dem im letzten Abschnitt verwendeten SketchPicker können Sie auch den ChromePicker verwenden.

Importieren Sie den ChromePicker genauso wie Sie den SketchPicker importiert haben:

importieren {ChromePicker} aus'Reaktionsfarbe';

Nachdem Sie den ChromePicker importiert haben, können Sie ihn in Ihrer App verwenden, indem Sie den folgenden Code hinzufügen:

 Farbe={ Das.state.background }
 onChangeComplete={ Das.handleChangeComplete }
 disableAlpha={WAHR}
/>

Der ChromePicker verwendet die gleichen Requisiten wie der SketchPicker, hat aber auch einige zusätzliche Optionen, wie z. B. die Möglichkeit, den Alphakanal zu deaktivieren, was Sie mit dem props disableAlpha tun können. Sie können die Farbe auch direkt mit dem Farbprop einstellen.

In der React-Color-Bibliothek sind auch andere Farbwähler verfügbar, z. B. Block, Twitter und GitHub. Jeder dieser Picker hat seine eigenen Requisiten, also lesen Sie unbedingt die Dokumentation für weitere Informationen.

Verbessern Sie Ihre Benutzererfahrung mit einem Farbwähler

Das Hinzufügen eines Farbwählers zu Ihrer React-App ist eine großartige Möglichkeit, die Benutzererfahrung zu verbessern. Es ermöglicht Benutzern, schnell und einfach Farben für ihre Anwendungen auszuwählen. Sie können die Farbauswahl auch benutzerfreundlicher gestalten, indem Sie das Tailwind-CSS verwenden.