Typography

ReadMoreText

A "show more"/"show less" toggle over long copy — the waiting page's bonus terms, cut at a character count rather than a line-clamp so it matches what production already truncates at.

import ReadMoreText from '@/components/ui/ReadMoreText';

Source: src/components/ui/ReadMoreText.tsx

Examples

Truncated terms text

The caller decides what counts as "long" and builds both the truncated and full forms (see `truncateAtWordBoundary`) — this component only toggles between two already-rendered nodes, so a server-rendered child like RichText can sit inside either.

Cashback is confirmed after the return window closes and the…

Props

`<ReadMoreText>` props

Prop	Type	Default	Description
`isLong`required	`boolean`	—	Whether the content is actually long enough to be worth truncating — gates whether the toggle renders at all. Computed by the caller from the same character count used to build `truncated` (see `truncateAtWordBoundary`), since this component never sees the raw text.
`moreLabel`required	`string`	—	—
`lessLabel`required	`string`	—	—
`truncated`required	`React.ReactNode`	—	Already-rendered short form. A `ReactNode`, not a string: the caller typically builds this from an async server component (e.g. `RichText`), which a client component can receive as children/props but can never import and render itself.
`full`required	`React.ReactNode`	—	Already-rendered full form.
`className`	`string`	`''`	—

Usage

Compute `isLong`/`truncated` from the same threshold — a mismatch would let the toggle appear with nothing new to reveal, or hide it while text is still cut.

Don’t

Don’t reach for this over a CSS line-clamp when the exact cut point doesn’t matter — this exists specifically to match production’s already-indexed character threshold.