react-truncatable
v1.0.6
Published
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
Downloads
34
Maintainers
Readme
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.