@versini/ui-responsive-text

A semantic and accessible React responsive text component built with TypeScript and TailwindCSS.

The ResponsiveText component displays different text content based on screen or container size, allowing for flexible and adaptive UI text. It supports both viewport-based and container-query-based breakpoints.

Table of Contents

• Features
• Installation
• Usage
• API

Features

• 🎯 Adaptive Text: Show different content at different breakpoints
• 📦 Container Queries: Supports both viewport and container-query modes
• ♿ Accessible: Renders semantic inline spans
• 🌲 Tree-shakeable: Lightweight and optimized for bundle size
• 🔧 TypeScript: Fully typed with comprehensive prop definitions

Installation

npm install @versini/ui-responsive-text

Note: This component requires TailwindCSS and the @versini/ui-styles plugin for proper styling. See the installation documentation for complete setup instructions.

Usage

Basic Example

import { ResponsiveText } from "@versini/ui-responsive-text";

function App() {
  return (
    <ResponsiveText
      short="Hi"
      long="Hello, World!"
    />
  );
}

On small screens, "Hi" is displayed. Above the sm breakpoint, "Hello, World!" is shown instead.

Custom Breakpoint

import { ResponsiveText } from "@versini/ui-responsive-text";

function App() {
  return (
    <ResponsiveText
      short="Menu"
      long="Navigation Menu"
      breakpoint="md"
    />
  );
}

Container Query Mode

When your layout depends on a container's width rather than the viewport, use mode="container". The parent element must have the @container class (from @tailwindcss/container-queries).

import { ResponsiveText } from "@versini/ui-responsive-text";

function App() {
  return (
    <div className="@container">
      <ResponsiveText
        short="$99"
        long="$99.00 per month"
        mode="container"
        breakpoint="sm"
      />
    </div>
  );
}

With JSX Content

Both short and long accept React.ReactNode, so you can pass rich content:

import { ResponsiveText } from "@versini/ui-responsive-text";

function App() {
  return (
    <ResponsiveText
      short={<strong>Save</strong>}
      long={<span><strong>Save</strong> to favorites</span>}
    />
  );
}

API

ResponsiveText Props

| Prop | Type | Default | Description | | ---------- | ---------------------------- | ------------ | ------------------------------------------------------- | | short | React.ReactNode | required | Content displayed below the breakpoint | | long | React.ReactNode | required | Content displayed at or above the breakpoint | | breakpoint | "sm" \| "md" \| "lg" \| "xl" | "sm" | The TailwindCSS breakpoint at which to switch content | | mode | "viewport" \| "container" | "viewport" | Whether to use viewport media queries or container queries |