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:

1. Use React Hooks instead of Class syntax to extend support for React 18+
2. Use TypeScript to refactor the source code and provide more complete type declarations (no need to install additional @types/react-truncate package)
3. Built-in <ShowMore /> component (the original author’s another package, which encapsulates <Truncate />, exists and Similar problems with Truncate are no longer maintained)
4. 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

pnpm add @re-dev/react-truncate

npm

npm i @re-dev/react-truncate

yarn

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+ ).

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...

License

MIT License © 2023-PRESENT chengpeiquan .