So fügen Sie Ihrer React-App einen Farbwähler hinzu
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 zunächst eine einfache Reaktions-App erstellen.
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 npm, dem Paketmanager für Node.js, installieren.
npm i react-color
Fügen Sie dann einfach den folgenden Code zu der Komponente hinzu, für die Sie die Farbauswahl anzeigen möchten:
import React from 'react'
import { SketchPicker } from 'react-color'
class Component extends React.Component {
render() {
return <SketchPicker />
}
}
export default Component
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:
- width : Die Breite des Farbwählers in Pixel.
- height : Die Höhe des Farbwählers in Pixel.
- color : Die anfängliche Farbe des Selektors.
- onChange : Eine Callback-Funktion, die ausgeführt wird, wenn sich die Farbe ändert.
- onChangeComplete : Eine Callback-Funktion, die ausgeführt wird, wenn die Farbänderung abgeschlossen ist.
Der folgende Code zeigt, wie alle verfügbaren Requisiten für den Farbwähler verwendet werden:
import React from 'react'
import { SketchPicker } from 'react-color'
class Component extends React.Component {
render() {
return (
<SketchPicker
width={200}
height={200}
color="#ff0000"
onChange={(color) => console.log(color)}
onChangeComplete={(color, event)=> console.log(color)}
/>
)
}
}
export default Component
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:
import { ChromePicker } from 'react-color';
Sobald Sie den ChromePicker importiert haben, können Sie ihn in Ihrer App verwenden, indem Sie den folgenden Code hinzufügen:
<ChromePicker
color={ this.state.background }
onChangeComplete={ this.handleChangeComplete }
disableAlpha={true}
/>
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.
Schreibe einen Kommentar