React Truncate Inside

React component for adding an ellipsis to the middle of a line of text.

Inspired by pablosichert / react-truncate

Online Demo

Install

npm install react-truncate-inside

Usage

import React from 'react';
import Truncate from 'react-truncate-inside';

export default function Demo() {
    return <Truncate text="An-Extremely-Long-Filename.pdf" width="100" />
}

Props

| Name | Type | Desc | Default | | -------- | ---------- | ------------------------------------------------------------ | -------------------- | | text | string | | | | width | number | Width of the element | parentNode.width | | offset | number | Position(from the end) of the ellipsis that shows in text | 8 | | ellipsis | string | Ellipsis that is added into the text in case it is truncated | '...' |

License

MIT License