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.

License

React Color Picker is released under the MIT License.