Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@workday/canvas-kit-react-color-picker

4.2.0 • Public • Published

Canvas Kit Color Picker

Color Picker is a two part component. It has a color input that handles custom hex colors and then selecting specific swatches.

> Workday Design Reference

Installation

yarn add @workday/canvas-kit-react-color-picker

or

yarn add @workday/canvas-kit-color-picker

Color Input

A controlled input for accepting typed/pasted hex codes.

Usage

import * as React from 'react';
import {ColorInput} from '@workday/canvas-kit-color-picker';
 
<ColorInput
  showCheck={true}
  onChange={this.onChange}
  value={this.state.color}
  onValidColorChange={this.validColorChange}
/>;

Static Properties

None

Component Props

All props available for TextInput are available here. Also, all standard input attributes are available and can be passed to the input field.

Required

None


Optional

value: string

The value entered by the user into the color input


inputRef: React.Ref<HTMLInputElement>

A ref to the input element. This allows you to imperatively focus on the color input if needed.


onChange: (e: React.ChangeEvent<HTMLInputElement>) => void

A onChange callback from the input. Value can be accessed from e.currentTarget.value. Should be used to control the input.


onValidColorChange: (color: string) => void

A callback that passes up the valid hex value typed by the user. This is always prefixed with a hash, and is always the expanded hex value (e.g. "03F" > "#0033FF").


showCheck: boolean

Optionally show a check icon when a custom hex color has been selected

Default: false


error: ErrorType

The type of error to display, if any.

Type Description
Error Red outline with error icon.
Alert Yellow outline with alert icon.

Color Preview

A component to show a color swatch

Usage

import * as React from 'react';
import {ColorPreview} from '@workday/canvas-kit-color-preview';
 
<ColorPreview value="#00FFCC" />;

Static Properties

None

Component Props

Required

value: string

The value entered by the user into the color input


Optional

id: string

An id linked to the color preview input to be used with an associated form label

Install

npm i @workday/canvas-kit-react-color-picker

DownloadsWeekly Downloads

501

Version

4.2.0

License

Apache-2.0

Unpacked Size

54.6 kB

Total Files

39

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar