@workday/canvas-kit-labs-react-color-picker
TypeScript icon, indicating that this package has built-in type declarations

4.8.1 • Public • Published

Canvas Kit React Color Picker

LABS: Beta This component is work in progress and currently in pre-release.

Color Picker is a popup for selecting a color.

The Color Picker is designed to be used different contexts. The pattern shown below is one where the Color Picker is used as a popup from a button target by using hooks around the callbacks provided by the component.

Installation

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

or

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

Usage

import * as React from 'react';
import ColorPicker from '@workday/canvas-kit-labs-react-color-picker';
import {colors} from '@workday/canvas-kit-react-core';
import {Button} from '@workday/canvas-kit-react-button';
import {Popper, Popup} from '@workday/canvas-kit-react-popup';

const MyComponent: React.FunctionComponent = () => {
  const [isOpen, setIsOpen] = React.useState(false);
  const [color, setColor] = React.useState('');
  const buttonRef = React.useRef(null);

  const toggleOpen = () => setIsOpen(!isOpen);

  const handleSubmit = React.useCallback(
    (submitColor: string) => {
      setColor(submitColor.toUpperCase());
      setIsOpen(false);
    },
    [setIsOpen]
  );

  return (
    <>
      <Button buttonRef={buttonRef} variant={Button.Variant.Primary} onClick={toggleOpen}>
        Toggle Color Picker
      </Button>
      <Popper placement={'bottom'} open={isOpen} anchorElement={buttonRef.current!}>
        <Popup style={{marginTop: 8}} padding={PopupPadding.s}>
          <ColorPicker
            resetColor={colors.blueberry400}
            resetLabel={'Reset'}
            showCustomHexInput={true}
            onColorChange={handleSubmit}
            onColorReset={() => handleSubmit(colors.blueberry400)}
            onSubmitClick={toggleOpen}
            value={color}
          />
        </Popup>
      </Popper>
    </>
  );
};

Static Properties

None

Component Props

Required

onColorChange: (color: string) => void

This handler is called when the user selects a color through either a mouse or keyboard event. It is called with the hex value of the color selected by the user, or with a custom hex value entered by the user in the custom input.

Optional

onColorReset: Function

When this handler is provided, a Reset button will be displayed at the top of the picker using the resetLabel provided. This handler is called when the reset button is selected through either a mouse or keyboard event.


resetColor: string

The color to display as part of the Reset button. It is strongly recommended that consumers provide a properly globalized value.

Note: This prop is only necessary when the onColorReset handler is provided.


resetLabel: string

The text to display as part of the Reset button. It is strongly recommended that consumers provide a properly globalized value.

Note: This prop is only necessary when the onColorReset handler is provided.

Default: Reset


value: string

The hex value of the color to display styled in a selected state. If the value doesn't match one of the available colors, the hex value will be displayed in the custom input.


colorSet: string[]

The hex values of the colors to display in the color picker grid. If no custom colors are provided, a default set will be rendered.


showCustomHexInput: boolean

When true the ColorInput component and a submit button will be displayed at the bottom of the picker allowing the user to enter a custom hex value.

Default: false


customHexInputLabel: string

The text to display abover the custom input. It is strongly recommended that consumers provide a properly globalized value.

Note: This prop is only used when showCustomHexInput is true.

Default: Custom Hex Color


onSubmitClick: (event: React.FormEvent) => void

When this handler is provided, an action can be tied to clicking the check button provided. This handler is called when the check button is selected through a keyboard event only.

Note: This prop is only used when showCustomHexInput is true.


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

    Package Sidebar

    Install

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

    Weekly Downloads

    759

    Version

    4.8.1

    License

    Apache-2.0

    Unpacked Size

    58.7 kB

    Total Files

    39

    Last publish

    Collaborators

    • merve.batan
    • raisa.primerova
    • jaclynjessup
    • nicholasboll
    • alanbsmith
    • workday-canvas-kit
    • justin.pante