react-color-dropdown-select v0.0.1

Color Dropdown Select

• supports mouse, touch, keyboard
• works for text colors, hex, rgb(a)
• accessibility taken care of

Closed:

Open:

Usage

yarn add color-dropdown-select

Unstyled by default, but can import manually from package color-dropdown-select/build/ColorDropdownSelect.css

import * as React from 'react'
import ColorDropdownSelect from 'color-dropdown-select'
import 'color-dropdown-select/build/ColorDropdownSelect.css'

export default class App extends React.Component {
	state = {
		selectedColorId: 'papayawhip',
		colors: [
			{ id: 'papayawhip', value: 'papayawhip', label: 'Pale Yellow' },
			{ id: 'abc', value: '#ABC', label: 'Light Blue' },
			{ id: 'purple', value: 'rgb(66,6,66)', label: 'Purple' },
		],
	}

	get selectorColors() {
		return this.state.colors.map(color => {
			return {
				...color,
				isSelected: color.id === this.state.selectedColorId,
			}
		})
	}

	handleColorSelect = (color) => {
		this.setState({ selectedColorId: color.id })
	}

	render() {
		return (
			<ColorDropdownSelect
				colors={this.selectorColors}
				handleColorSelect={this.handleColorSelect}
			/>
		)
	}
}

props

export type Color = {
	id: string
	label: string
	value: string
	isSelected: boolean // one single color MUST be selected
}

export interface IColorDropdownSelect {
	colors: Array<Color>
	handleColorSelect: { (color: Color): void }
	dropdownSymbol?: string | JSX.Element
}

Uses a down caret svg as dropdownSymbol by default, but can provide custom one: