React component to shorten text by lines, words or characters with some customizations and callbacks.
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>
| 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> |
This project is licensed under the MIT License - see the LICENSE file for details