Text

Description

This is the base component of any static text element placed in your prism. These are single or multi-line text areas of UTF-8 encoded 2D text. Use them inside your prism as is, or call them from other components. Text cannot be modified by a user, but can be copied with the cursor.

Example

import React from "react";
import { Text } from "magic-script-components";
export default class TextExample extends React.Component {
render() {
return (
<Text textSize={0.1} localPosition={[-0.3, 0, 0]}>
Text Example
</Text>
);
}
}

Common Events

Common Properties

Create Properties

NameTypeDefault ValueDescription
textstringn/aThe UTF-8 encoded text to initially set the text to.
stylestringnormalThe style of the Magic Leap font.
weightstringregularThe weight (i.e., thickness) of the Magic Leap font.

If text is empty, the content of the <text> tag will be used as text.

style options: FontStyle

weight options: FontWeight

Element Properties

NameTypeDescription
allCapsbooleanDisplays the text in all caps if true.
charSpacingnumberSets the additional character spacing that is applied between characters. Note a spacing of 0 is the default spacing.
lineSpacingnumberSets the line spacing to adjust the distance between lines of text; e.g., use 1 for single-spaced text, 2 for double-spaced text. The default is 1.0.
stylestringSets the style of the Magic Leap font.
weightstringSets the weight (i.e., thickness) of the Magic Leap font.
textstringSets the UTF-8 encoded text. This call is ignored if there is a current localization key set. Set the localization key to an empty string, "", to unset it.
textAlignmentstringAligns the text to the left, center, or right or justifies it.
textColorverc4Sets the RGBA color of the rendered text.
textSizenumberSets the text render size height in scene units.
boundsSizeobjectSets the text bounds size in scene units. The default value of 0,0 indicates there is no bounds and the text can grow and does not wrap or truncate. Setting the bounds greater than 0 in both X and Y will set the text bounds and cause the text to wrap or truncate within.
fontParamsobjectSets the font parameters, including style, weight, pixel size, and tracking. This uses one of the default sets of Magic Leap font resources that support style and weight.

boundsSize

{
boundsSize: vec2,
wrap: boolean
}

fontParams

{
style: string,
weight: string,
fontSize: number,
tracking: number,
allCaps: boolean
}

textAlignment options: HorizontalTextAlignment