# React Middle Ellipsis [Check out the demo.](https://bluepeter.github.io/react-middle-ellipsis/) Adding ellipses to the end of long text is cool. But not always! Sometimes the end of the text contains vital information, particularly for URLs or filenames. This React component is designed with that use case in mind. ## Install ```bash yarn add react-middle-ellipsis ``` ## Usage Once `import`ed, you can then wrap any node with ``. This will compute the width of the surrounding parent node. Then, it will look for the child node (so make sure to add a `span` at minimum internally): it will use this element to compute the width of the child, and then shorten the text element whose class is `ellipseMe` (optional) to fit within the parent. The component re-computes things if the browser window is resized, too! ```jsx import React from "react"; import MiddleEllipsis from "react-middle-ellipsis"; const Component = props => { return ( <>

I am some long text that should be ellipsed in the middle because the end contains important stuff.

Don't ellipse me.{" "} I am some long text that should be ellipsed in the middle because the end contains important stuff.

<> ); }; export default Component; ``` ## Development Notes for developing this component. `yarn && yarn run start` in this directory and separately also in `/example`. This will live reload any changes made in `/src`. Change the version number in `package.json` and `npm publish` once complete.Then, go to Github Releases and follow the instructions to publish a new version there too. ## License MIT © [bluepeter](https://github.com/bluepeter)

			Stars	Issues	Version	Updated	Created	Size
	react-media		2,439	8	1.10.0	5 years ago	10 years ago
	react-middle-ellipsis		63	7	1.2.2	2 years ago	5 years ago

react-media vs react-middle-ellipsis

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past