/react-color-picker

🎨 Modern Color Picker for React

Primary LanguageTypeScript

react-color-picker

React Color Picker

ci Npm Version typescript version eslint version prettier version react version vite version

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.