react-simple-ellipsis

A very simple component that allows you to add ellipsis to your texts when you do not want to display the entire text with the possibility of displaying the entire text

Props

prop	default	type
id	required	string | number
text	required	string
mode		number
ellipsis	"..."	string
label	"Show more"	string
limit	200	number
class	"more"	string

Install

yarn add react-simple-ellipsis
or
npm i react-simple-ellipsis

Usage

Truncate mode

• 1 or EllipsisMode.After: Truncate text after the next word when the limit is reached
• 2 or EllipsisMode.Before: Truncate text before a word when the limit is reached
• default EllipsisMode.InPlace: Truncate text when the limit has been reached

import { Ellipsis } from "react-simple-ellipsis";

<Ellipsis
  ellipsis="..."
  label="Show more"
  id={comment.id}
  text={comment.text}
  limit={200}
  class="more"
  mode={1}
/>;

Or

import { Ellipsis, EllipsisMode } from "react-simple-ellipsis";

<Ellipsis
  ellipsis="..."
  label="Show more"
  id={comment.id}
  text={comment.text}
  limit={200}
  class="more"
  mode={EllipsisMode.After}
/>;