A simple component that allows you to add ellipsis to your texts when you do not want to display the entire text

by React

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}
/>;

GitHub

View Github