ColorPicker

Le composant ColorPicker offre une interface complète et intuitive pour sélectionner des couleurs. Il supporte plusieurs formats de couleur (HEX, RGB, RGBA) et permet de gérer des présélections et un historique des couleurs utilisées, idéal pour :

• Configurer les couleurs du design système
• Sélectionner les couleurs des thèmes personnalisés
• Choisir les teintes pour les éléments visuels
• Gérer une palette de couleurs préférées
• Implémenter des sélecteurs de couleurs avancés dans les formulaires

Le composant offre une expérience utilisateur fluide avec un aperçu en temps réel, la sauvegarde automatique de l'historique et le support du copier-coller des valeurs de couleur.

Utilisation basique

Affiche un sélecteur de couleur simple avec un bouton déclencheur et une interface de sélection en popup.

import { ColorPicker } from '@/components/color-picker';

export default function Component() {
  return <ColorPicker />
}

Utilisation avec valeur initiale

Configure une couleur initiale et récupère les changements de couleur via le prop onChange.

import { ColorPicker } from '@/components/color-picker';
import { useState } from 'react';

export default function Component() {
  const [color, setColor] = useState('#ff0000');

  return (
    <ColorPicker 
      value={color}
      onChange={setColor}
    />
  )
}

Utilisation avec présélections

Affiche un ensemble de couleurs prédéfinies que l'utilisateur peut sélectionner rapidement. Les présélections sont affichées dans une section dépliable du sélecteur.

import { ColorPicker } from '@/components/color-picker';
import { useState } from 'react';

const colorPresets = [
  '#ff0000',
  '#00ff00',
  '#0000ff',
  '#ffff00',
  '#ff00ff',
  '#00ffff',
  '#ffffff',
  '#000000',
];

export default function Component() {
  const [color, setColor] = useState('#ff0000');

  return (
    <ColorPicker 
      value={color}
      onChange={setColor}
      presets={colorPresets}
    />
  )
}

Utilisation avec historique de couleurs

Active l'affichage d'une section "Dernières couleurs utilisées" qui se peuple automatiquement à partir du localStorage. L'historique conserve les 18 dernières couleurs utilisées.

import { ColorPicker } from '@/components/color-picker';
import { useState } from 'react';

export default function Component() {
  const [color, setColor] = useState('#ff0000');

  return (
    <ColorPicker 
      value={color}
      onChange={setColor}
      showRecent={true}
    />
  )
}

Formats de couleur supportés

Le composant accepte et convertit automatiquement plusieurs formats de couleur :

• HEX : #ff0000, #f00
• RGB : rgb(255, 0, 0)
• RGBA : rgba(255, 0, 0, 1)
• Noms CSS : red, blue, etc.

Toutes les couleurs sont converties en format HEX en interne pour la cohérence.

Référence API

Prop	Type	Default	Description
value	string	-	Couleur sélectionnée au format HEX, RGB, RGBA ou nom CSS
onChange	(color: string) => void	-	Callback déclenché quand la sélection de couleur change. Retourne la couleur au format HEX
presets	string[]	-	Tableau des couleurs présélectionnées affichées dans une section dépliable
showRecent	boolean	false	Affiche l'historique des couleurs récemment utilisées (sauvegardé dans le localStorage)

Typescript

ColorPickerProps

type ColorPickerProps = {
  value?: string;
  onChange?: (color: string) => void;
  presets?: string[];
  showRecent?: boolean;
} & ComponentProps<typeof Button>;

Stockage des couleurs

• Clé localStorage : used_colors
• Nombre maximum de couleurs : 18
• Format : JSON array de chaînes de couleur au format HEX
• Comportement : Les couleurs sont sauvegardées automatiquement à la fermeture du sélecteur