wwwwwwwwwwwwwwwwwww

Text

Text primitives with themes custom to each font.

yarnbunnpmpnpm
import React from 'react'
import { Paragraph, SizableText, Text, XStack, YStack } from 'tamagui'
export function TextDemo() {
return (
<YStack space="$2" alignItems="center">
<SizableText size="$3">SizableText</SizableText>
<XStack space>
<SizableText theme="alt1" size="$3">
alt1
</SizableText>
<SizableText theme="alt2" size="$3">
alt2
</SizableText>
</XStack>
<Paragraph size="$2" fontWeight="800">
Paragraph
</Paragraph>
</YStack>
)
}

Features

  • Themes that give you control over spacing, weights, and sizes custom to each font.

  • Size prop that automatically matches all theme values.

  • Media query styles, hoverStyle, pressStyle, focusStyle.

Usage

export default () => (
<>
<Text>Text</Text>
<SizableText>Sizable Text</SizableText>
<Paragraph>Paragraph</Paragraph>
</>
)

Text

Text in Tamagui matches to Text in react-native-web, just with the added Tamagui Props.

It explicitly doesn't inherit your theme color or other font properties, as it's meant to be plain and used for extension. Below, we'll show SizableText which extends Text, and Paragraph which extends SizableText. Generally, Paragraph is the useful view as it will use theme values, while you can extend Text if you'd like to derive your own design system.

import { Text, XStack, YStack } from 'tamagui'
export default () => (
<>
<Text // can add theme values color="$white" fontFamily="$body" // or just use direct values fontSize={20} hoverStyle={{ color: '$colorHover', }} >
Lorem ipsum
</Text>
</>
)

SizableText

Tamagui lets you define font sizing, spacing, line height, letter spacing and other properties with createFont, of which you can have many different configurations. We've found a nice pattern is to "align" all your keys across these sub-objects.

SizableText adds a size property thats defined using a spread variant which looks for a matching key on each of these properties (using @tamagui/get-font-sized):

  • color
  • fontStyle
  • textTransform
  • fontFamily
  • fontWeight
  • letterSpacing
  • fontSize
  • lineHeight

So, if you've defined small, medium and large keys on each createFont category, you can use it like so:

<SizableText size="$small" />

Source code for SizableText .

Paragraph

Paragraph extends SizableText and is defined as:

export const Paragraph = styled(SizableText, {
name: 'Paragraph',
tag: 'p',
userSelect: 'auto',
color: '$color',
size: '$true',
whiteSpace: 'normal',
})

Note: Paragraph renders to a p tag on web, which can cause issues when you nest them during SSR. If you don't mind rendering to a span, use SizableText, otherwise, be careful when nesting items inside a Paragraph.