import React from "react";
import { DraggableText } from "components/draggable_text";

export function App() {
  return <DraggableText>Drag me into the design</DraggableText>;
}

tsx

Styling the text

You can use the style prop to style the text in the app's iframe. Where possible, Canva will use these styles to determine the style of the text that's dropped into the design.

import React from "react";
import { DraggableText } from "components/draggable_text";

export function App() {
  return (
    <DraggableText
      style={{
        fontStyle: "italic",
        fontWeight: "bold",
        textAlign: "center",
        textDecoration: "underline",
      }}
    >
      Drag me into the design
    </DraggableText>
  );
}

tsx

Customizing the drag data

If you want the text that's dropped into the design to look different from the text that's in the app's iframe, set props that are distinct from the style prop.

import React from "react";
import { DraggableText } from "components/draggable_text";

export function App() {
  return (
    <DraggableText
      style={{
        fontStyle: "italic",
        fontWeight: "bold",
        textAlign: "center",
        textDecoration: "underline",
      }}
      decoration="none"
      fontStyle="normal"
      fontWeight="normal"
      textAlign="end"
    >
      Drag me into the design
    </DraggableText>
  );
}

tsx

Props

#childrenstring

Required

The text to make draggable.

#decorationstring

Optional

The decoration of the text.

The available values include:

"none"
"underline"

The default value is "none".

#fontStylestring

Optional

The style of the text.

The available values include:

"normal"
"italic"

The default value is "normal".

#fontWeightstring

Optional

The weight of the text.

The available values include:

"normal"
"bold"

The default value is "normal".

#stylestring

Optional

The style of the text.

The available values include:

"none"
"italic"

The default value is "none".

#textAlignstring

Optional

The alignment of the text.

The available values include:

"start"
"center"
"end"

The default value is "start".