Skip to content
React component to shorten text
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo/src
src
tests
.flowconfig
.gitignore
.travis.yml
CONTRIBUTING.md
LICENSE
README.md
jest.transform.js
nwb.config.js
package.json
setupTests.js
yarn.lock

README.md

React-Shorten

Build Status Coverage Status npm package

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

Installation

  1. Using yarn yarn add react-shorten
  2. Or using npm npm install react-shorten

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>

API

Prop Type Default Description Example
by 'lines' or 'characters' or 'words' 'lines' Specifies how to shorten the children <Shorten by="words">Lorem ipsum dolor sit amet</Shorten>
length integer 3 Specifies how many 'lines' or 'characters' or 'words' of text should be preserved until it gets shorten. <Shorten length={3}>Lorem ipsum dolor sit amet</Shorten>
ellipsis string ' more...' String that is added to the end of the text when it is shorten. <Shorten ellipsis="...">Lorem ipsum dolor sit amet</Shorten>
children string The text to be shorten. <Shorten>Lorem ipsum dolor sit amet</Shorten>
onShorten function Function that is called every time when original text is shorten. <Shorten onShorten={() => {}}>Lorem ipsum dolor sit amet</Shorten>
onExpand function Function that is called when more link is clicked and original text is shown fully. <Shorten onExpand={() => {}}>Lorem ipsum dolor sit amet</Shorten>
ellipsisStyle object Object that overrides the inline-styles of ellipsis's button element. <Shorten ellipsisStyle={{color: 'white', fontSize: 20}}>Lorem ipsum dolor sit amet</Shorten>
ellipsisClassName string The css class name of ellipsis's button element. <Shorten ellipsisClassName="ellipsis-btn">Lorem ipsum dolor sit amet</Shorten>

Author

Gauti Selvaraj

License

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

You can’t perform that action at this time.