<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

TypeScript customization

You can use module augmentation to customize the TypeScript types for any of Text's props:

declare module 'componentry/types/components/Text/Text' {
  interface TextPropsOverrides {
    // ... overwrite any types for Text props ...
  }
}

See the TypeScript guide for more information.

StylingText styles