Backto Home

Gowtham

Gowtham Selvaraj (Gauti)

Selvaraj

React Shorten

React component to shorten text

Github

React component to shorten text by lines, words or characters with some customizations and callbacks.

Installation

  • Using yarnyarn add react-shorten
  • Or using npmnpm install react-shorten

General Usage

import Shorten from 'react-shorten';
<Shorten
  by={'lines' | 'characters' | 'words'}
  length={Number}
  onExpand={() => {}}
  onShorten={() => {}}
  ellipsis="more..."
  ellipsisStyle={{
    color: 'white',
    fontSize: 20
  }}
  ellipsisClassName="ellipsis-btn">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</Shorten>

Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean placerat odio quam, et dictum lorem faucibus quis. Morbi molestie dictum consectetur. Donec at massa justo. Phasellus in elit vulputate, volutpat orci eget, sodales elit. In justo dui, blandit id augue egestas, auctor blandit ipsum. Nunc vel urna in dui tempus maximus sed quis erat. Cras pretium posuere ex eu volutpat. Fusce porta enim a posuere laoreet. Nam non porttitor metus. Phasellus non leo neque. Suspendisse lobortis viverra pharetra. Vivamus malesuada, orci non mollis gravida, purus massa congue lacus, tempor malesuada nisi quam eget purus. Vestibulum quam magna, aliquam id condimentum sed, consequat et lectus. Vivamus neque turpis, bibendum vel commodo at, elementum et risus. Ut ac hendrerit mauris. Vestibulum vitae nulla sed enim pretium iaculis ut quis est.

API

by

Specifies how to shorten the children

Type: 'lines' or 'characters' or 'words'

Default: 'lines'

Example
<Shorten by="words">Lorem ipsum dolor sit amet</Shorten>

length

Specifies how many 'lines' or 'characters' or 'words' of text should be preserved until it gets shorten.

Type: integer

Default: 3

Example
<Shorten length={3}>Lorem ipsum dolor sit amet</Shorten>

ellipsis

String that is added to the end of the text when it is shorten.

Type: string

Default: ' more...'

Example
<Shorten ellipsis="...">Lorem ipsum dolor sit amet</Shorten>

children

The text to be shorten.

Type: string

Default: ''

Example
<Shorten>Lorem ipsum dolor sit amet</Shorten>

onShorten

Function that is called every time when original text is shorten.

Type: function

Default: () => {}

Example
<Shorten onShorten={() => {}}>Lorem ipsum dolor sit amet</Shorten>

onExpand

Function that is called when more link is clicked and original text is shown fully.

Type: function

Default: () => {}

Example
<Shorten onExpand={() => {}}>Lorem ipsum dolor sit amet</Shorten>

ellipsisStyle

Object that overrides the inline-styles of ellipsis's button element.

Type: object

Default: {}

Example
<Shorten ellipsisStyle={{color: 'white', fontSize: 20}}>Lorem ipsum dolor sit amet</Shorten>

ellipsisClassName

The css class name of ellipsis's button element.

Type: string

Default: ''

Example
<Shorten ellipsisClassName="ellipsis-btn">Lorem ipsum dolor sit amet</Shorten>

License

This project is licensed under the MIT License - see the LICENSE file for details

Contact

If you have any questions or feedback please email me.