DisplayReact

Color Swatch

One color, shown and named.

Rendered by React 19.3.1

import { ColorSwatch } from '@hamur/react/color-swatch'

const colors = [
  { color: '#6699cc', caption: '#6699cc' },
  { color: 'rgb(229 72 77 / 0.5)', caption: 'Red at 50%' },
  { color: null, caption: 'None' },
]

export default function ColorSwatchExample() {
  return (
    <ul className="color-swatch-list">
      {colors.map(({ color, caption }) => (
        <li key={caption}>
          <ColorSwatch.Root
            className="color-swatch color-swatch-large"
            color={color}
          />
          <span className="muted">{caption}</span>
        </li>
      ))}
    </ul>
  )
}

Not measured yetTests passing in React

Not measured yetSize

Not measured yetMemory

Not measured yetSpeed

[N] commits

Installation

npm i @hamur/react

Not on npm yet. The package goes out under the chosen name.

Anatomy

Import the component and assemble its parts:

<ColorSwatch.Root />

Examples

The demo at the top is the one example this component has so far.

API reference

4 props across 1 parts, in React syntax. className, style, render are listed once, under Shared props.

Root`ColorSwatch.Root`

An image of one color, named by the color's description. Inside ColorPicker.Root it shows the picker's color unless color is given. Renders a <div>.

Root props
Prop	Type	Default
`color`The color, any CSS color string, or `null` for no color.	`string \| null`	`—`
`labels`The color name words and the name of no color, in English by default.	`Partial<ColorSwatchLabels>`	`—`
`getColorName`Names the color in place of the generated name.	`((color: Color) => string)`	`—`
`locale`The locale of the transparency percentage.	`Intl.LocalesArgument`	`—`

Root data attributes
Data attribute	Description
`data-empty`	Present when there is no color.
`data-transparent`	Present when the color's alpha is below 1.

Root CSS variables
CSS variable	Description
`--color`	The color.
`--color-opaque`	The color at alpha 1.

Shared props

Every part that renders an element takes these.

Shared props
Prop	Type
`className`CSS class applied to the element, or a function that returns a class based on the component's state.	`string \| ((state: State) => string \| undefined)`
`style`Style applied to the element, or a function that returns a style object based on the component's state.	`React.CSSProperties \| ((state: State) => React.CSSProperties \| undefined)`
`render`Allows you to replace the component's HTML element with a different tag, or compose it with another component.	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, State>`

Keyboard and accessibility

Keyboard

Color Swatch takes no focus and has no keys of its own.

Accessibility

What the parts set
Part	Sets	So that
Root	`role="img"` and `aria-label` with the color's name, unless it has `aria-label` or `aria-labelledby`; no role description	the color is read as words, once, and not skipped as decoration
Root	"No color" (`labels.noColor`) and `data-empty` for `null`	an empty value is said, not shown as a blank square

Focus order

Color Swatch is not focusable; focus passes over it.