react-truncater
React component that handles text truncation based on max characters allowed
Installation
npm install --save react-truncater
or
yarn add react-truncater
Usage
The list of available properties:
chars: PropTypes.number.isRequired: max number of characters after which the ellipsis will be displayed
ellipsisClassName: PropTypes.string: css classname for '...',
more: PropTypes.bool: Should clicking on the '...' display the rest of the text?
handleClick: PropTypes.func: what happens when user clicks on the text
import Truncater from 'react-truncater'
<Truncater more={true} chars={10}>This is the text to be truncated</Truncater>
CSS and preprocessors
The component wraps the given text within a <section> element with the css classname of 'truncater'. You may choose to customize this for margins, paddings, etc.
You may also specify a 'ellipsisClassName' parameter value to style the ellipsis according to your needs
Testing
N/A
License
MIT