https://github.com/bluepeter/react-middle-ellipsis

Truncate a long string in the middle, instead of the end.
https://github.com/bluepeter/react-middle-ellipsis

react react-component reactjs

Last synced: about 1 month ago
JSON representation

Truncate a long string in the middle, instead of the end.

• Host: GitHub
• URL: https://github.com/bluepeter/react-middle-ellipsis
• Owner: bluepeter
• License: mit
• Created: 2019-05-21T22:43:53.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-01T04:26:22.000Z (about 2 years ago)
• Last Synced: 2024-10-27T23:58:17.838Z (about 2 months ago)
• Topics: react, react-component, reactjs
• Language: JavaScript
• Homepage: https://bluepeter.github.io/react-middle-ellipsis/
• Size: 1.25 MB
• Stars: 63
• Watchers: 3
• Forks: 10
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-components - react-middle-ellipsis - [demo](https://bluepeter.github.io/react-middle-ellipsis/) - Truncate long strings in the middle instead of the end. (Utilities / Miscellaneous)
• awesome-react-components - react-middle-ellipsis - [demo](https://bluepeter.github.io/react-middle-ellipsis/) - Truncate long strings in the middle instead of the end. (Utilities / Miscellaneous)
• awesome-react-components - react-middle-ellipsis - [demo](https://bluepeter.github.io/react-middle-ellipsis/) - Truncate long strings in the middle instead of the end. (Utilities / Miscellaneous)
• awesome-react-components - react-middle-ellipsis - [demo](https://bluepeter.github.io/react-middle-ellipsis/) - Truncate long strings in the middle instead of the end. (Utilities / Miscellaneous)
• fucking-awesome-react-components - react-middle-ellipsis - 🌎 [demo](bluepeter.github.io/react-middle-ellipsis/) - Truncate long strings in the middle instead of the end. (Utilities / Miscellaneous)

README

        
# 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)