# react-canvas-color-picker > Simple and customizable canvas color picker built in React + TS Latest version **1.0.21** (published 2020-11-11) · MIT license · 0 weekly downloads ## Install ```sh npm install react-canvas-color-picker pnpm add react-canvas-color-picker yarn add react-canvas-color-picker bun add react-canvas-color-picker ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.21 | | Published | 2020-11-11 | | First published | 2020-10-29 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 1 | | Unpacked size | 42.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 3 | | Author | Scott Savarie | | Maintainers | artokun, scottsavarie | | Keywords | color, picker, color picker, react, canvas, typescript | ## Links - npm: https://www.npmjs.com/package/react-canvas-color-picker - Repository: https://github.com/ScottSavarie/react-canvas-color-picker - Homepage: https://github.com/ScottSavarie/react-canvas-color-picker#readme - Issues: https://github.com/ScottSavarie/react-canvas-color-picker/issues - npm.io page: https://npm.io/package/react-canvas-color-picker ## Dependencies (1) - [tinycolor2](https://npm.io/package/tinycolor2.md) 1.4.1 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.0.21 (latest) — 2020-11-11 - 1.0.20 — 2020-11-04 - 1.0.19 — 2020-11-04 - 1.0.18 — 2020-11-03 - 1.0.17 — 2020-11-03 - 1.0.16 — 2020-11-02 - 1.0.15 — 2020-11-02 - 1.0.14 — 2020-10-30 - 1.0.13 — 2020-10-30 - 1.0.12 — 2020-10-30 - 1.0.11 — 2020-10-30 - 1.0.10 — 2020-10-30 - 1.0.9 — 2020-10-29 - 1.0.8 — 2020-10-29 - 1.0.7 — 2020-10-29 - … 10 more at https://npm.io/package/react-canvas-color-picker/versions ## README ![Image of Color Picker](https://github.com/ScottSavarie/react-canvas-color-picker/blob/images/images/colorpicker.png?raw=true) # React Canvas Color Picker Simple, fast, customizable canvas based color picker built in React. Supports `HSLA`, `HSVA` color spectrums, and `hsla`, `hsva`, `rgba`, `hex`, and `hex8` color formats. ## Install ### npm ``` npm install react-canvas-color-picker ``` ### yarn ``` yarn add react-canvas-color-picker ``` ## Basic Usage ``` import React, { useState, useRef, useCallback } from "react"; import { ColorPicker, ColorFormats } from "react-canvas-color-picker"; export default function App() { const [color, setColor] = useState({ r: 255, g: 255, b: 255, a: 1 }); const formats = useRef(["rgba"]); const handleChange = useCallback(({ colors }) => { setColor({ ...colors.rgba }); }, []); return ( ); } ``` ## Props | Prop | Required | Type | Default | Description | | ----------------- | -------- | ------------------------------------------ | ---------------------------------- | ----------------------------------------------------- | | `initialColor` | no | `RGBA`, `HSLA`, `HSVA`, `HEX`, `CSS Color` | `{ r: 255, g: 255, b: 255, a: 1 }` | Color the color picker will mount with | | `formats` | no | `ColorFormats[]` ex: `["rgba", hsla"]` | `["rgba"]` | Array of color formats sent in callback functions | | `spectrum` | no | `"hsva"` or `"hsla"` | `hsva` | Specify which color spectrum to use | | `spectrumWidth` | no | `number` | `240` | Sets width of color box and sliders | | `spectrumHeight` | no | `number` | `240` | Sets height of color box | | `sliderHeight` | no | `number` | `14` | Sets height of hue and alpha sliders | | `className` | no | `string` | `undefined` | Additional classes for parent container | | `spectrumClasses` | no | `string` | `undefined` | Additional classes for hsla / hsva spectrum container | | `hueClasses` | no | `string` | `undefined` | Additional classes for hue slider container | | `alphaClasses` | no | `string` | `undefined` | Additional classes for alpha slider container | | `handleClasses` | no | `string` | `undefined` | Additional classes for slider and spectrum handles | | `hideAlpha` | no | `boolean` | `false` | Removes the alpha selector | | `onPanStart` | no | `(event: colorPickerChangeEvent) => void` | `undefined` | Callback function when pan starts | | `onPan` | no | `(event: colorPickerChangeEvent) => void` | `undefined` | Callback function on pan | | `onPanEnd` | no | `(event: colorPickerChangeEvent) => void` | `undefined` | Callback function when pan ends | ## Change Events `onPanStart`, `onPan`, and `onPanEnd` all return an object containing the colors specified in the `formats` prop, and the `id` of the spectrum or slider that was panned with. Note: make sure to wrap handlers in `useCallback`. ``` { colors: object; canvasId: string; } ``` ## `setColor` Sometimes you'll want to set the color of the color picker after it's been mounted (imagine changing a hex input, or clicking a color swatch). For this use case there is a `setColor` method which can be access by passing a ref to the color picker. ``` import React, { useRef } from "react"; import { ColorPicker, SetColor } from "react-canvas-color-picker"; export default function App() { const colorPickerRef = useRef(); const setRandomColor = () => { const newColor = { r: Math.random() * 255, g: Math.random() * 255, b: Math.random() * 255, a: 1 }; colorPickerRef.current?.setColor(newColor); }; return ( <> ); } ``` ## Advanced Example ### See: https://codesandbox.io/s/react-canvas-color-picker-q4heh?file=/src/App.tsx:1280-1429 --- _Source: https://npm.io/package/react-canvas-color-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._