React Color Picker

The feature rich ColorPicker component for React, sourced with TypeScript, WAI-ARIA compliant and is mainly based on ColorPicker.

Demo

Live Demo

Highlights

• Accessibility Focus for WAI-ARIA compliance
• Built in translations for German, French, Russian, Arabic, Spanish, Portuguese, Romanian, Polish, Chinese, Korean and Japanese for accessibility
• TypeScript sourced code base
• Supporting HEX(a), RGB(a), HSL(a) and HWB(a)
• Supports keyboard and touch events as well as responsive design
• Automatic repositioning of the popup dropdown on show / window scroll
• Right To Left Languages Supported

Installation

npm i @thednp/react-color-picker
# or
yarn add @thednp/react-color-picker
# or
pnpm add @thednp/react-color-picker

Usage

import { DefaultColorPicker } from '@thednp/react-color-picker'
import '@thednp/react-color-picker/style.css'

function App() {
  return <DefaultColorPicker value="turquoise" onChange={color => console.log(color)} />;
}

For additional component configuration options, please check the demo.

Some notes

• The React version for ColorPicer was implemented with minor differences to accomodate the declarative nature of the modern JavaScript framework, especially with event listeners.
• Due to the nature of React state management, this component is implemented with minor differences compared to the SolidJS version.
• Tests powered by Vitest make use of a real browser environment for consistent and realistic results.
• Since the React event listeners are synthetic by nature, some special fixtures have been implemented for the tests to make them possible.

License

React Color Picker is released under the MIT License.