Getting Started

This package provides a series of React components for text omission scenarios such as truncating multi-line text or ellipsis in the middle.

Introduction

This is a Fork version from react-truncate (Based on v2.4.0 ) .

The following upgrades have been made based on this version:

Use React Hooks instead of Class syntax to extend support for React 18+ / 19+
Use TypeScript to refactor the source code and provide more complete type declarations (no need to install additional @types/react-truncate package)
Built-in <ShowMore /> component (the original author’s another package, which encapsulates <Truncate />, exists and Similar problems with Truncate are no longer maintained)
Built-in new <MiddleTruncate /> component to realize ellipsis in the middle of text (encapsulation of <Truncate />)

Since the original version has not been maintained for a long time and the original author is rarely active, it is planned to handle some issues that need to be solved through this repository. Thanks to the original author Years of dedication.

Installation

Run the following command in your terminal to install this package in your project.

pnpm add @re-dev/react-truncate

npm i @re-dev/react-truncate

yarn add @re-dev/react-truncate

This package has two peer dependencies of React, react and react-dom. Please install them together (version requirements are React 16+ ).

With CDN

If you’re using a CDN for your project, please ensure that the version is v0.4.6 or later. The CDN entry file provides an IIFE that registers a global variable named ReactTruncate (accessible as window.ReactTruncate ).

UNPKG
jsDelivr

<script src="https://unpkg.com/@re-dev/react-truncate" crossorigin></script>

<script
  src="https://cdn.jsdelivr.net/npm/@re-dev/react-truncate"
  crossorigin
></script>

Note: Make sure to include the React CDN before this script to avoid runtime errors.

<!-- React and ReactDOM -->
<script
  src="https://unpkg.com/react@18/umd/react.production.min.js"
  crossorigin
></script>
<script
  src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
  crossorigin
></script>

Bundles

This package provides three build formats, allowing you to choose the one that best fits your development environment or runtime requirements.

Filename	Target Environment	Description
index.mjs	Node.js & Browsers	ESM module, suitable for modern browsers and bundlers
index.cjs	Node.js	CommonJS module, designed for Node.js and legacy bundlers
index.js	Browsers	IIFE module, designed for direct use in browsers

How It Works?

When using import , the ESM file (index.mjs) will be automatically resolved in supported environments.
When using require , the CommonJS file (index.cjs) will be automatically resolved.
For browser environments, use the IIFE file (index.js), which registers a global variable.

What about exports in package.json?

Here’s how this package defines its entry points for various environments and tools. You can also view the full package.json for reference:

{
  "name": "@re-dev/react-truncate",
  "files": ["dist"],
  "main": "./dist/index.cjs", // CommonJS entry for Node.js
  "module": "./dist/index.mjs", // ESM entry for modern bundlers
  "types": "./dist/index.d.ts", // TypeScript types declaration
  "exports": {
    ".": {
      "import": "./dist/index.mjs", // ESM import path
      "require": "./dist/index.cjs", // CommonJS require path
      "types": "./dist/index.d.ts" // Explicit TypeScript types path
    }
  },
  "browser": "./dist/index.js", // Browser-specific entry (IIFE)
  "unpkg": "./dist/index.js", // UNPKG CDN entry (IIFE)
  "jsdelivr": "./dist/index.js" // jsDelivr CDN entry (IIFE)
}

Test environment

This package is compatible with popular testing tools like Jest , and by default, the main field will be used as the entry point during testing. However, different projects may also encounter test environment operation errors or warnings. Here are some common scenarios and solutions:

Canvas-Related Errors:

Since this package rely on the Canvas API (which is not natively available in Node.js), errors might occur when running test scripts. To resolve this, you can install a Canvas implementation like node-canvas:

pnpm add -D canvas

npm i -D canvas

yarn add -D canvas

Refer to the error log for further details about any missing dependencies.

Using a Different Entry Point

If you want to use the ESM module instead of the default CommonJS entry during testing, you can configure Jest’s moduleNameMapper to override the default mapping.

For example:

module.exports = {
  moduleNameMapper: {
    '^@re-dev/react-truncate$':
      '<rootDir>/node_modules/@re-dev/react-truncate/dist/index.mjs',
  },
}

Acknowledgement

The development of this project was only possible due to the inspiration and ideas from these amazing projects.

Pablo Sichert

react-truncate: Provides basic code and design ideas of Truncate, where it all started
react-show-more: Provides basic code and design ideas of ShowMore

Simão Garcia

Truncate.tsx: Provides the first version of react-truncate from Class Component syntax to Functional Component and TypeScript conversion

Contributors

Loading…