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

childrenstringRequired

The text to make draggable.

decorationstringOptional

The decoration of the text.

The available values include:

"none"
"underline"

The default value is "none".

fontStylestringOptional

The style of the text.

The available values include:

"normal"
"italic"

The default value is "normal".

fontWeightstringOptional

The weight of the text.

The available values include:

"normal"
"bold"

The default value is "normal".

stylestringOptional

The style of the text.

The available values include:

"none"
"italic"

The default value is "none".

textAlignstringOptional

The alignment of the text.

The available values include:

"start"
"center"
"end"

The default value is "start".