Text

​

Introduction

The <Text> component is used to render text in your app. It lets you easily display and customize your text content.

​

Basic usage

To use the <Text> component, you can just include it in your app and pass the text you want to display as a child of the component.

import { Text } from '@latitude-data/react'

const MyComponent = () => (
  <Text>
    Hello, world!
  </Text>
)

You can use our scale of predefined styles to quickly customize your text. Here’s an example:

import { Text } from '@latitude-data/react'

const MyComponent = () => (
  <Text.H1>
    Hello, world!
  </Text.H1>
)

This will also render the text as a <h1> tag.

These are the predefined styles available for the <Text> component, along with their corresponding font size and line height:

​

Advanced usage

Apart from the predefined styles, you can also customize the text using the following properties:

Here’s an example of how you can use these properties:

import { Text } from '@latitude-data/react'

const MyComponent = () => (
<Text
  color="primary"
  size="h1"
  family="sans"
  weight="bold"
  spacing="wide"
  align="center"
  wordBreak="breakAll"
  whiteSpace="preWrap"
>
  Hello, world!
</Text>