https://github.com/irene-24/react-truncatable

Streamline your UI with this React component that is designed to truncate text seamlessly. [Storybook Doc] https://64f883177ec11e1edcf84fc7-hpmuefbevq.chromatic.com/?path=/docs/stories-truncatable--docs
https://github.com/irene-24/react-truncatable

react storybook testing truncate-text

Last synced: 2 months ago
JSON representation

Streamline your UI with this React component that is designed to truncate text seamlessly. [Storybook Doc] https://64f883177ec11e1edcf84fc7-hpmuefbevq.chromatic.com/?path=/docs/stories-truncatable--docs

• Host: GitHub
• URL: https://github.com/irene-24/react-truncatable
• Owner: Irene-24
• Created: 2023-08-13T22:16:45.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-09-17T10:56:12.000Z (over 1 year ago)
• Last Synced: 2024-10-11T23:40:15.642Z (2 months ago)
• Topics: react, storybook, testing, truncate-text
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-truncatable
• Size: 308 KB
• Stars: 2
• Watchers: 0
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Truncatable

[![NPM Publish](https://github.com/Irene-24/react-truncatable/actions/workflows/Build-deploy-npm.yaml/badge.svg)](https://github.com/Irene-24/react-truncatable/actions/workflows/Build-deploy-npm.yaml)

[![Deploy storybook via chromatic](https://github.com/Irene-24/react-truncatable/actions/workflows/Deploy-chromatic.yaml/badge.svg)](https://github.com/Irene-24/react-truncatable/actions/workflows/Deploy-chromatic.yaml)

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

```sh

  npm install react-truncatable

```

### yarn

```sh

  yarn add react-truncatable

```

### pnpm

```sh

  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.

```jsx

import "react-truncatable/style.css"

```

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

```jsx

import Truncatable from "react-truncatable";

```

and use like so

```jsx

```

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

```jsx

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

const b: Omit = {

  showAll: true,

  toggle() {

  },

};

console.log(b);

```

### **Help  and Questions**

Raise an issue [here](https://github.com/Irene-24/react-truncatable/issues/new)

### **Support the project**

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