Solid Color Picker

The feature rich ColorPicker component for SolidJS, 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/solid-color-picker
# or
yarn add @thednp/solid-color-picker
# or
pnpm add @thednp/solid-color-picker

Usage

import { DefaultColorPicker } from '@thednp/solid-color-picker'
import '@thednp/solid-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 SolidJS version for ColorPicer was implemented with minor differences to accomodate the declarative nature of the modern JavaScript framework, especially with event listeners.
• Tests powered by Vitest make use of a real browser environment for consistent and realistic results.

License

Solid Color Picker is released under the MIT License.