🚀 Ultra-Lightweight Text & Content Engine

high-performance, lightweight library designed for modern React applications. This isn't just a text renderer—it's a powerful tool for building Server-Driven UI (SDUI) and dynamic content systems with ease. Stop wrestling with complex layouts. Our library makes text manipulation fast, intuitive, and highly flexible. By injecting components directly into your strings, you can bridge the gap between backend logic and frontend flexibility.

✨ Features

1. Dynamic Replacement: Component Injection & SDUI

Our flagship feature. Transform simple strings into fully functional React components on the fly. One can think of many different applications for this technology, for example:

• Server-Driven UI: Control your frontend from the server by sending tags that the library converts into interactive components.
• Smart Highlighting: Automatically find and wrap text patterns in custom components—perfect for search results.

2. Line Clamp: Take Control of Your Layout

Avoid messy UI overflows. The lineClamp prop allows you to cap text at a specific line count effortlessly. Whether it's a sleek card preview or a dense news feed, your content will always stay within its bounds.

3. Truncate: Intelligent Container Awar eness

No more manual string slicing. The library detects the boundaries of the parent element and automatically clips the text to fit perfectly, maintaining a fluid and responsive user experience.

4. Fit Text: Perfectly Balanced Typography

Forget manual font-size tweaking. The Fit Text feature automatically scales typography to fill its container, ensuring headlines make a bold statement without breaking the layout. Includes high-precision tuning for total control.

5. Word Restrict

Act as a surgical editor for your content. Limit text by a specific count of words or characters using customizable delimiters (like ... or Read more). Ideal for blog excerpts and SEO meta-descriptions.

6. Easy Customization: Your Styles, Your Rules

The library is an extension of your design system. Apply inline styles or CSS classes directly. It works seamlessly with Tailwind CSS, Styled Components, or standard CSS Modules.

🛠 Features in Action

1. Dynamic Replacement (SDUI)

Inject React components or variables directly into your strings.

Let's say the backend sends you data for an advertising banner:

const backenDTO = {
  text: `%head% HOW AI IS CHANGING THE WORLD %/head%
%description% Book your spot and get a prompt engineering checklist for free %/description%
Only from {startTime} to {endTime} inclusive.
<upperCase> closed in </upperCase> : <timer/>`,
  vars: {
    startTime: '28.01.2026 ',
    endTime: '30.01.2026',
  },
}

The frontend can be integrated so that all data is managed by the backend, i.e., the beginning, end, and markup. Something like this:

<Text
  replace={{
    // If you want to insert simple variables 
    // into the markup, just insert them as a value.
    '{startTime}': backenDTO.vars.startTime, /
    '{endTime}': backenDTO.vars.endTime,
    // If you want to insert a JSX, pass
    //  a function with any JSX as a value.
    '<timer/>': () => { 
      return <Timer /> // custom timer with interative logic
    },
    '%head%(.*?)%/head%': (match, groups) => {
      // The groups contain native groups in the regular
      // expression you specified in the key. In this
      // case, groups contains the text between the "%head%" tags.
      // The match contains a complete match of the regular season of Kazan in the key
      return <strong> {groups[0]}</strong>
    },
    '%description%(.*?)%/description%': (match, groups) => {
      // Groups contains the text between the "%description%" tags.
      return <p className="description"> {groups[0]}</p>
    },
    // double backslash to escape special characters - native regular expression behavior
    '\\<upperCase\\>(.*?)\\<\\/upperCase\\>': (match, groups) => {
      return <span className="upper"> {groups[0]}</span>
    },
  }}>
  {backenDTO.text}
</Text>

It will look something like this:

HOW AI IS CHANGING THE WORLD
Book your spot and get a prompt engineering checklist for free
Only from 28.01.2026 to 30.01.2026 inclusive. CLOSES IN :  hours 32 minutes 5 seconds

You can pass any regular expression as an argument for replacement, and in the replacement function, the first argument is a full match of the specified regular expression, the second group, if you specified them (useful if you want to get text, for example, inside a tag)

Let's look at an example of text marking during search

<Text
  replace={{
    'mark me': (match) => {
      return <mark> {match} </mark>
    },
  }}>
  Some text mark me some text.
</Text>

2. Line Clamp

Limit text to a specific number of lines with ease.

<Text lineClamp={3}>
  This is a very long text that will be truncated after three lines, ensuring
  your UI stays clean and consistent across all devices.
</Text>

3. Truncate

Automatically clip text based on the parent's width.

<div style={{ width: '200px' }}>
  <Text truncate>
    This content will be cut off perfectly at 200 pixels.
  </Text>
</div>

4. Fit Text

Scale font sizes dynamically to fill the parent container.

<Text fitText precision={0.001}>
  Fit this text
</Text>

Flexible precision adjustments are available via props. The lower the precision, the better. The default is 0.001.

5. Word Restrict

Limit content by word or character count with custom delimiters.

<Text wordRestrit={{ restrictNumber: 10 }}>
  This text is way too long for a preview and will be cut at ten words.
</Text>

This text etc.

📦 Installation

npm install react-text-engine

📖 API Reference

| Prop | Type | Default | Description | | :--------------- | :-------- | :---------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | lineClamp | number | undefined | Maximum number of lines to display. | | fitText | boolean | false | Enables automatic font scaling to fill container space. | | precision | number | 0.1 | Tuning for the Fit Text scaling algorithm. | | truncate | boolean | false | Enables truncation based on parent container width. | | replace | object | undefined | Key-value pairs for Component Injection. where the key is any regular expression and the value is a function that returns a JSX | | wordRestrict | object | undefined | An object with two properties: 1) restrictNumber - Limits the number of words or characters displayed. 2) delimiter - The string used when content is restricted or truncated | | style | object | {} | native browser inline styles | | className | string | '' | Standard CSS class for custom styling. |

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.