Text

A component for rendering text.

import { Text } from '@cerberus/react'

Usage

Hello, world!

This is normal text

This is small text

import { Text } from '@cerberus/react'

function TextDemo() {
  return (
    <>
      <Text
        as="h1"
        color="page.text.100"
        textStyle={{
          base: 'heading-md',
          md: 'heading-lg',
        }}
      >
        Hello, world!
      </Text>
      <Text>This is normal text</Text>
      <Text as="small" color="info.text.100" textStyle="body-sm">
        This is small text
      </Text>
    </>
  )
}

Raw HTML

To render raw HTML, you can utilize the React dangerouslySetInnerHTML combined with the whiteSpace property.

This is a raw paragraph with a bold word and a
line break.

import { Text } from '@cerberus/react'

function DangerouslySetDemo() {
  const rawHTML =
    '<p>This is a raw paragraph with a <strong>bold</strong> word and a <br /> line break.</p>'

  return (
    <Text
      dangerouslySetInnerHTML={{
        __html: rawHTML,
      }}
      textStyle="body-sm"
      whiteSpace="pre-wrap"
    />
  )
}

API

export type Headings = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
export type TextElements = 'p' | 'strong' | 'em' | 'small' | 'span'

export interface TextProps extends BoxProps {
  as?: TextElements | Headings
}

define function Text(props: TextProps): ReactNode

Props

The Text component accepts the following props along with the props from the Box component.

Name	Default	Description
as		The text-based element to render the component as.

On this page

Edit this page on Github