openColorSelector

API reference for the openColorSelector method.

This version of the API is deprecated. This version will soon be unsupported. You should use a stable version of the API in your app.

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 * as 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

anchorobjectRequired

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

anchor.topnumberRequired

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

anchor.leftnumberRequired

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

anchor.widthnumberRequired

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

anchor.heightnumberRequired

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

optionsobjectRequired

The options for configuring the behavior of the color selector.

options.scopesarrayRequired

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

The available scopes include:

"solid"

selectedColorobjectOptional

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.typestringRequired

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

selectedColor.hexStringstringRequired

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.onColorSelectfunctionRequired

A callback function that runs when a color is selected.

options.onColorSelect(event)objectRequired

An object that contains information about the color selection event.

options.onColorSelect(event.selection)objectRequired

An object that contains information about the selected color.

options.onColorSelect(event.selection.type)stringRequired

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

options.onColorSelect(event.selection.hexString)stringRequired

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.