openColorSelector

API reference for the openColorSelector method.

Opens a color selector flyout.

To learn more, see Using color selectors.

Usage

import { Rows, Swatch } from "@canva/app-ui-kit";
import { openColorSelector } from "@canva/asset";
import * as React from "react";
import styles from "styles/components.css";

export function App() {
  const [color, setColor] = React.useState<string>("#ff0099");

  return (
    <div className={styles.scrollContainer}>
      <Rows spacing="1u">
        <Swatch
          fill={color}
          onClick={async (event) => {
            const anchor = event.currentTarget.getBoundingClientRect();
            await openColorSelector(anchor, {
              scopes: ["solid"],
              onColorSelect: (event) => {
                if (event.selection.type === "solid") {
                  setColor(event.selection.hexString);
                }
              },
            });
          }}
        />
      </Rows>
    </div>
  );
}

tsx

Parameters

#anchorobject

Required

The dimensions and coordinates of an element on which to pin the color selector flyout.

#anchor.topnumber

Required

The top position from which to pin the color selector flyout, in pixels.

#anchor.leftnumber

Required

The left position from which to pin the color selector flyout, in pixels.

#anchor.widthnumber

Required

The width of the element from which to pin the color selector flyout, in pixels.

#anchor.heightnumber

Required

The height of the element from which to pin the color selector flyout, in pixels.

#optionsobject

Required

The options for configuring the behavior of the color selector.

#options.scopesarray

Required

The scopes that the color selector should support. This affects the user experience.

The available scopes include:

"solid"

#selectedColorobject

Optional

The color to display as selected when the color selector is opened.

This is only required if there are multiple selectable colors rendered within the user interface, such as multiple Swatch components. If this value isn't defined, the most recently selected color will be displayed as selected.

This property only affects Document colors and Default colors.

#selectedColor.typestring

Required

The type of color. For the time being, the only valid value is "solid".

#selectedColor.hexStringstring

Required

The selected color, as a hex code.

The hex code must include all six characters and be prefixed with a # symbol — for example, "#ff0099".

#options.onColorSelectfunction

Required

A callback function that runs when a color is selected.

#options.onColorSelect(event)object

Required

An object that contains information about the color selection event.

#options.onColorSelect(event.selection)object

Required

An object that contains information about the selected color.

#options.onColorSelect(event.selection.type)string

Required

The type of color. For the time being, the only valid value is "solid".

#options.onColorSelect(event.selection.hexString)string

Required

The selected color, as a hex code.

The hex code always includes all six characters and is prefixed with a # symbol — for example, "#ff0099".

Returns

A Promise that, once resolved, returns a function. When called, this function closes the color selector flyout. This function is not usually necessary, and it's better to let users close the flyout themselves.