React Truncatable

Overview

A React component that truncates text based on available space and supports multiline. Perfect for creating article previews, blog snippets, product card descriptions and many more.

Compatible with Next 13

Install

It can be installed with npm, yarn or pnpm

npm

  npm install react-truncatable

yarn

  yarn add react-truncatable

pnpm

  pnpm install react-truncatable

Usage

Include the css in _app.(tsx|jsx|js) or index.(tsx|jsx|js)or app.(tsx|jsx|js), or whatever is the root jsx file.

import "react-truncatable/style.css"

Include the import at the top, where the Truncatable will be used:

import Truncatable from "react-truncatable";

and use like so

<Truncatable content="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore quae quas fugit repudiandae. A cumque dicta expedita, omnis ex voluptatibus eum quaerat ipsum molestiae id qui cum saepe labore inventore voluptas ipsam necessitatibus mollitia. Libero eum aliquam officiis sit reiciendis nihil hic suscipit delectus doloremque doloribus magnam, eligendi sequi!" />

You can also import the types, and use them if you need them (TS only)

import Truncatable, { ToggleProps } from "react-truncatable";

const b: Omit<ToggleProps, "togglerRef"> = {
  showAll: true,
  toggle() {

  },
};

console.log(b);

Help and Questions

Raise an issue here

Support the project

Don't forget to star the repository if it was helpful to you.