Text

Text component for displaying and formatting text content with alignment and truncation options

The Text component prepares content with a few properties.

Installation

npm install --save @godaddy/antares

Props

The Text component accepts the following props:

NameTypeDefault

align?"start" | "center" | "end" | "justify" | undefined—

The alignment of the text.

as?string | undefined'span'

The HTML element to render the text as.

children?ReactNode—

The content to display inside the text.

maxLines?number | undefined—

The maximum number of lines to display.

The wrapping behavior of the text.

Hints at the type of data that might be entered by the user while editing the element or its contents

is?string | undefined—

Specify that a standard HTML element should behave like a defined custom built-in element

render?DOMRenderFunction<any, any> | undefined—

Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.

Examples

As

Setting the as prop allows you to change the HTML tag of the Text component.

import { Text, type TextProps } from '@godaddy/antares';export function AsExample(args: TextProps) {  return (    <Text {...args} as="marquee">      A scrolling marquee    </Text>  );}

Align

Setting the align prop allows you to change the alignment of the text. You can choose from start, center, end, or justify. start works like left and end works like right. These keywords support RTL languages so you do not need to worry about the language of the text.

import { Text, type TextProps } from '@godaddy/antares';export function AlignExample(args: TextProps) {  return (    <Text {...args} as="p" align="center">      Text is aligned to the center    </Text>  );}

Max Lines

Setting the maxLines prop allows you to limit the number of lines of text that are displayed using an ellipsis. In browsers that don't support multiline text truncation using line-clamp, the text will be truncated after a single line regardless of the number provided for maxLines.

import { Text, type TextProps } from '@godaddy/antares';export function MaxLinesExample(args: TextProps) {  return (    <div style={{ width: '300px', border: '1px solid red' }}>      <Text {...args} as="p" maxLines={2}>        This will have a maximum of two lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod        tempor incididunt ut labore et dolore magna aliqua.      </Text>    </div>  );}

Wrap

Setting the wrap prop allows you to change the wrapping of the text. The values can be wrap, nowrap, balance, pretty, or stable.

wrap is the setting that is most commonly used. For most elements you will not to explicitly set this.
nowrap should be avoided except in cases where it is important to prevent the text from wrapping.
balance is most commonly used for headlines, titles, and labels.
pretty is most commonly used for body text.
stable is commonly used for editable text, such as textareas.

import { Text, type TextProps } from '@godaddy/antares';export function WrapExample(args: TextProps) {  return (    <div style={{ width: '300px', border: '1px solid red' }}>      <Text {...args} as="p" wrap="pretty">        Text is wrapped in a way that best balances the number of characters on each line, enhancing layout quality and        legibility. Because counting characters and balancing them across multiple lines is computationally expensive,        this value is only supported for blocks of text spanning a limited number of lines      </Text>    </div>  );}