react-truncator v0.0.5
About
A react component that horizontally truncates text based on how much width it fills in it's parent container.
Install
Install from npm and you should be ready. The package will use your version of react from your project.
npm install --save react-truncator
Use
Currently, the truncator component works best when used with block level elements rather the inline or inline block elements as this allows it to determine it's full size. The component takes the following props:
- text: The text to truncate as a string
- extraSpacing: Any extra spacing the text might need.
- minWidth: Override the size of the space the text takes up with a minimum width
import Truncator from 'react-truncator'
// ...
<Truncator
text={yourText}
extraSpacing={20}
/>
How it works
The truncator will take a first pass and render the text with CSS styles so it fills up it's full space within it's parent. From here the truncator will know the text's width and will use an algorithm to determine how many characters it needs to truncate in order to fit within the space. Once it determines this it re-renders with the truncated text.