Skip navigation

Skip to main content

API reference
API reference

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

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.