<Text />

Text provides performant, consistently themed typography for your application.

Usage

Use the variant prop to switch between typography styles. You can omit a variant value to default to 'body'.

Componentry Components

<Text variant='h3'>Componentry Components</Text>

Variant to element mapping

Text renders elements based on its variant value. Out of the box Componentry includes the following text elements mapping:

const textElementMap = { h1: 'h1', h2: 'h2', h3: 'h3', body: 'p', code: 'code', small: 'small', }

With this default mapping the following usage would render an h1 and p element:

<Text variant="h1">Componentry Components</Text> // ^ Renders an h1 element <Text>Must go faster.</Text> // ^ Defaults to 'body' variant, rendering a p element

You can customize this mapping using the exported configureTextElementsMap helper. Any mapping you pass is merged with the default, simplifying adding new variants and customizing the defaults.

import { configureTextElementsMap } from 'componentry' // Add a title variant that renders an h1, and render a div instead of a p // for body variants. configureTextElementsMap({ title: 'h1', body: 'div', })

Props

Name
Description
htmlFor

string
truncate

Truncates overflowing text with an ellipses

boolean
variant

Display variant

"small" | "h1" | "h2" | "h3" | "body" | "code"

Styling

Text styles

Class
Description
.C9Y-Text-base
Base class applied to all variants for shared structural styles
.C9Y-Text-body
Variant class applied when `variant="body"`
.C9Y-Text-h1
Variant class applied when `variant="h1"`
.C9Y-Text-h2
Variant class applied when `variant="h2"`
.C9Y-Text-h3
Variant class applied when `variant="h3"`