Dynamic Text

Text content that self adjust to avaliable width, no javascript, pure css!

Example Usage

<DynamicText
  content={{
    stages: [
      { text: "Short text" },
      { text: "Medium length text" },
      { text: "This is a longer text that will be shown when there's more space" }
    ]
  }}
/>

Features

• Automatically adjusts text content based on available width
• No JavaScript required for the core functionality
• Supports multiple text variations for different space constraints
• Debug mode to visualize the text switching mechanism
• Responsive design with mobile support
• Customizable styling and colors
• Support for various text formats (dates, times, currencies, etc.)
• International date and time formatting with Intl API

Props

• content: Object containing the stages array of text variations (Required)
• enableAutoSortForMonoFont: Whether to automatically sort text by length for monospace fonts (default: false)
• className: Additional CSS classes to apply (default: '')
• showDebug: Whether to show the debug overlay (default: false)

Content Structure

The content prop should be an object with a stages array. Each stage is an object with:

type Stage = {
  text: string
  color?: string
}

Examples

Basic Usage

<DynamicText
  content={{
    stages: [
      { text: "Short" },
      { text: "Medium length" },
      { text: "This is a longer text" }
    ]
  }}
/>

With International Date Formatting

const dateStages = [
  { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long', era: 'long' },
  { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' },
  { year: 'numeric', month: 'long', day: 'numeric', weekday: 'short' },
  { year: 'numeric', month: 'short', day: 'numeric' },
  { month: 'short', day: 'numeric', weekday: 'short' },
  { month: 'short', day: 'numeric' },
  { day: '2-digit' }
].map((format, index) => ({
  text: new Intl.DateTimeFormat('en-GB', format).format(new Date()),
  color: `blue-${700 - index * 100}`
}));

<DynamicText
  content={{
    stages: dateStages
  }}
/>

With Colors

<DynamicText
  content={{
    stages: [
      { text: "Short", color: "red-500" },
      { text: "Medium length", color: "blue-500" },
      { text: "This is a longer text", color: "green-500" }
    ]
  }}
/>

With Debug Mode

<DynamicTextWrapper
  content={{
    stages: [
      { text: "Short" },
      { text: "Medium length" },
      { text: "This is a longer text" }
    ]
  }}
  showDebug={true}
/>

Live Demo