Put the dots in the middle of a long string, versus the end.
npm install react-middle-ellipsisAdding 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.
``bash`
yarn add react-middle-ellipsis
Once imported, you can then wrap any node with . This willspan
compute the width of the surrounding parent node. Then, it will look for the
child node (so make sure to add a at minimum internally): it will useellipseMe
this element to compute the width of the child, and then shorten the text
element whose class is (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 (
<>
export default Component;
`
Notes for developing this component.
yarn && yarn run start in this directory and separately also in /example./src
This will live reload any changes made in .
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.
MIT © bluepeter