Skip to content

React component that trims overflowing multi line text and adds a specified tail

License

Notifications You must be signed in to change notification settings

mdedys/react-text-trimmer

Repository files navigation

react-text-trimmer

NPM version mdedys dependencies Status devDependencies Status peerDependencies Status

Installation

Install from NPM:

yarn install react-text-trimmer

Usage

Options

lines: number of lines to truncate text

prefix: prefix to attach to beginning of text, default is empty string

suffix: suffix to attach to end of text, default is ...

interval: dobounce interval, default is 166

There is two ways to use the text trimmer. One can use the component or the react hook.

Components

Props:

options: TextTrimmerOptions

import TextTrimmer from "react-text-trimmer"

...
<TextTrimmer>
  Long text.........
<TextTrimmer>

...

Hook

import { useTextTrimmer } from "react-text-trimmer"

...
const ref = React.useRef(null)

const value = useTextTrimmer(text, ref, options)

return <div ref={ref}>{value}</div>

...

Code Style

This repository is configured with EditorConfig.

About

React component that trims overflowing multi line text and adds a specified tail

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •