Expandable Text

A paragraph that shows a few lines and a Read more link. Pressing the link grows the box to the full text, and it shrinks back on Show less. The link only appears when the text is long enough to be cut, and it reports whether it is expanded. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add expandable-text

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/expandable-text.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { ExpandableText } from "@/components/ui/expandable-text";

export default function Example() {
  return <ExpandableText text="A long paragraph of text goes here..." lines={3} />;
}

Props