@snack-uikit/color-picker

Color Picker

Installation

npm i @snack-uikit/color-picker

Changelog

Description

• Пакет @snack-uikit/color-picker предоставляет компонент ColorPicker для выбора цвета с визуальным палитр-пикером и текстовыми полями для ручного ввода значений.
• Поддерживает три цветовые модели: HEX, RGB и HSV, между которыми можно переключаться через SegmentedControl.
• Работает с альфа-каналом (withAlpha): при включённом режиме позволяет управлять прозрачностью цвета.
• Поддерживает два режима применения изменений: автоматический (autoApply={true}) — изменения применяются сразу при выборе цвета, и ручной (autoApply={false}) — изменения применяются по кнопке "Применить", с возможностью отмены через кнопку "Отмена".
• Позволяет настраивать доступные цветовые модели через проп colorMode, скрывая ненужные варианты (например, только HEX и RGB).
• Визуальный палитр-пикер автоматически подстраивается под выбранную цветовую модель и режим работы с альфа-каналом.
• При выборе цвета в HEX-режиме компонент валидирует введённое значение и показывает ошибку при некорректном формате.
• Конвертирует значения между различными цветовыми моделями и предоставляет полную информацию о выбранном цвете в формате RawColor (hex, rgb, rgba, hsl, hsla, hsv, hsva).
• Figma: ColorPicker.

Example

import { ColorPicker, RawColor } from '@snack-uikit/color-picker';
import { useState } from 'react';

function Example() {
  const [color, setColor] = useState<string>('#000000');
  const [rawValue, setRawValue] = useState<RawColor>({} as RawColor);

  const handleChange = (rawColor: Partial<RawColor>) => {
    if (rawColor.hex) {
      setColor(rawColor.hex);
    }
    setRawValue(rawColor as RawColor);
  };

  return (
    <ColorPicker
      value={color}
      onChange={handleChange}
      withAlpha={true}
      autoApply={false}
      colorMode={{
        hex: true,
        rgb: true,
        hsv: true,
      }}
    />
  );
}

ColorPicker

Props