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/preview/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.scopearray

Required

For the time being, the only valid scope is "solid".

#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)object

Required

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

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

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. Generally though, this function is not necessary and it's better to let users close the flyout themselves.