Comment ajouter un sélecteur de couleurs à votre application React

L’ajout d’un sélecteur de couleurs à une application React peut permettre aux utilisateurs de prendre beaucoup plus facilement des décisions concernant les couleurs qu’ils souhaitent utiliser. Les sélecteurs de couleurs sont un excellent outil pour les utilisateurs travaillant avec une application graphique ou toute application prenant en charge la personnalisation.

La bibliothèque de couleurs réactives offre une large gamme d’options et de nombreux styles de sélecteurs de couleurs pour répondre à vos besoins.

Ajout d’un sélecteur de couleurs à votre application

La bibliothèque de couleurs de réaction facilite l’ajout d’un sélecteur de couleurs à votre application React. Cette bibliothèque offre aux utilisateurs un moyen simple et intuitif de sélectionner des couleurs pour leurs applications. Le code est simple à utiliser et offre une excellente expérience utilisateur. Avant d’ajouter un sélecteur de couleurs, vous devez d’abord créer une application de réaction simple.

Un aperçu de react-color

La bibliothèque react-color est un excellent moyen d’ajouter un sélecteur de couleurs à votre application React. Il offre une interface facile à utiliser qui permet aux utilisateurs de choisir parmi une gamme de couleurs. La bibliothèque fournit également des accessoires que vous pouvez utiliser pour personnaliser le sélecteur de couleurs.

Le code pour ajouter un sélecteur de couleurs à votre application React est simple. Pour utiliser la bibliothèque react-color, vous devez d’abord installer la bibliothèque à l’aide de npm, le gestionnaire de packages pour Node.js.

 npm i react-color 

Ensuite, ajoutez simplement le code suivant au composant dont vous souhaitez afficher le sélecteur de couleurs :

 import React from 'react'
import { SketchPicker } from 'react-color'
class Component extends React.Component {
  render() {
    return <SketchPicker />
  }
}
export default Component 

Le code ci-dessus affichera un sélecteur de couleurs de base. Il permettra aux utilisateurs de choisir parmi une gamme de couleurs. Le sélecteur affichera également le code HEX de la couleur sélectionnée, que vous pourrez utiliser dans d’autres parties de votre application.

Accessoires disponibles

La bibliothèque react-color fournit des accessoires pour personnaliser le sélecteur de couleurs. Vous pouvez utiliser ces accessoires pour modifier la taille du sélecteur, les couleurs disponibles et bien plus encore.

Vous trouverez ci-dessous les accessoires disponibles pour le sélecteur de couleurs :

• largeur: La largeur du sélecteur de couleurs en pixels.
• hauteur: La hauteur du sélecteur de couleurs en pixels.
• couleur: La couleur initiale du sélecteur.
• sur le changement: Une fonction de rappel qui s’exécute lorsque la couleur change.
• onChangeComplete: Une fonction de rappel qui s’exécute lorsque le changement de couleur est terminé.

Le code suivant montre comment utiliser tous les accessoires disponibles pour le sélecteur de couleurs :

 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 

Le code ci-dessus affichera un sélecteur de couleurs avec une largeur de 200px, une hauteur de 200px, une couleur initiale de #ff0000 et une palette de couleurs. Il affichera également un champ de saisie pour le code couleur et affichera le canal alpha. Lorsque la couleur change, il appellera le rappel onChange et consignera la nouvelle couleur dans la console.

Ajout de sélecteurs de couleurs supplémentaires

La bibliothèque react-color propose une gamme de sélecteurs de couleurs différents, et en plus du SketchPicker utilisé dans la dernière section, vous pouvez également utiliser le ChromePicker.

Importez le ChromePicker de la même manière que vous avez importé le SketchPicker :

 import { ChromePicker } from 'react-color'; 

Une fois que vous avez importé le ChromePicker, vous pouvez l’utiliser dans votre application en ajoutant le code suivant :

 <ChromePicker
    color={ this.state.background }
    onChangeComplete={ this.handleChangeComplete }
    disableAlpha={true}
/> 

Le ChromePicker utilise les mêmes accessoires que le SketchPicker, mais dispose également de quelques options supplémentaires, telles que la possibilité de désactiver le canal alpha, ce que vous pouvez faire avec l’accessoire disableAlpha. Vous pouvez également définir la couleur directement avec l’accessoire de couleur.

Il existe également d’autres sélecteurs de couleurs disponibles dans la bibliothèque de couleurs réactives, telles que Block, Twitter et GitHub. Chacun de ces sélecteurs a ses propres accessoires, alors assurez-vous de consulter la documentation pour plus d’informations.

Améliorez votre expérience utilisateur avec un sélecteur de couleurs

L’ajout d’un sélecteur de couleurs à votre application React est un excellent moyen d’améliorer l’expérience utilisateur. Il permet aux utilisateurs de sélectionner rapidement et facilement des couleurs pour leurs applications. Vous pouvez également rendre le sélecteur de couleurs plus convivial à l’aide du CSS Tailwind.