mirror of
https://github.com/hanzo-docs/docs.git
synced 2026-10-28 07:09:50 +00:00
zeekay
a572ed7c00
Migrated 93 MDX pages from old Tamagui-based site to @hanzo/docs system: - 13 intro pages (installation, props, styles, themes, etc.) - 22 core pages (configuration, styled, variants, animations, etc.) - 48 component pages (button, dialog, select, toast, etc.) - 14 guide pages (next-js, expo, vite, webpack, metro, etc.) Zero tamagui references. Uses @hanzo/docs-base-ui + @hanzo/docs-mdx.
126 lines
3.5 KiB
Plaintext
126 lines
3.5 KiB
Plaintext
---
|
|
title: Text
|
|
description: Text primitives with themes custom to each font
|
|
name: text
|
|
component: Paragraph
|
|
package: text
|
|
demoName: Text
|
|
---
|
|
|
|
- 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.
|
|
<Notice theme="green">
|
|
The base `Text` component is already included in `@hanzogui/core` (and `@hanzo/gui`). This
|
|
package is optional and adds `SizableText` and `Paragraph`, which extend `Text` with the
|
|
`size` prop and theme-aware defaults.
|
|
</Notice>
|
|
|
|
## Installation
|
|
|
|
If you're using `@hanzo/gui`, `SizableText` and `Paragraph` are already included. Otherwise, install independently:
|
|
|
|
```bash
|
|
npm install @hanzogui/text
|
|
```
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
export default () => (
|
|
<>
|
|
<Text>Text</Text>
|
|
<SizableText>Sizable Text</SizableText>
|
|
<Paragraph>Paragraph</Paragraph>
|
|
</>
|
|
)
|
|
```
|
|
|
|
## Text
|
|
|
|
Text in Hanzo GUI matches Text in react-native-web, with the added [Gui props](/docs/intro/props).
|
|
|
|
It explicitly does not inherit your theme color or other font properties, as it is meant to be plain and used for extension. Below, we show `SizableText` which extends Text, and `Paragraph` which extends SizableText. Generally, Paragraph is the useful component as it uses theme values, while you can extend Text if you want to derive your own design system.
|
|
|
|
```tsx
|
|
import { Text, XStack, YStack } from '@hanzo/gui'
|
|
|
|
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
|
|
|
|
Hanzo GUI 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 that is defined using a [spread variant](/docs/core/styled#spread-variants) which looks for a matching key on each of these properties (using `@hanzogui/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:
|
|
|
|
```tsx
|
|
<SizableText size="$small" />
|
|
```
|
|
|
|
[Source code for SizableText](https://github.com/hanzoai/gui/blob/main/code/ui/text/src/SizableText.tsx).
|
|
|
|
## Paragraph
|
|
|
|
Paragraph extends SizableText and is defined as:
|
|
|
|
```tsx
|
|
export const Paragraph = styled(SizableText, {
|
|
name: 'Paragraph',
|
|
tag: 'p',
|
|
userSelect: 'auto',
|
|
color: '$color',
|
|
size: '$true',
|
|
whiteSpace: 'normal',
|
|
})
|
|
```
|
|
|
|
<Notice>
|
|
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.
|
|
</Notice>
|
|
|
|
## Inline Text Elements
|
|
|
|
For semantic inline text styling, `@hanzogui/text` exports `Strong`, `Em`, and `Span`:
|
|
|
|
```tsx
|
|
import { Strong, Em, Span, Paragraph } from '@hanzogui/text'
|
|
|
|
export default () => (
|
|
<Paragraph>
|
|
This is <Strong>bold text</Strong>, this is <Em>italic text</Em>, and this is a{' '}
|
|
<Span color="$blue10">colored span</Span>.
|
|
</Paragraph>
|
|
)
|
|
```
|
|
|
|
These render to their corresponding HTML elements (`<strong>`, `<em>`, `<span>`) on web while remaining compatible with React Native.
|