react-middle-ellipsis

WebJar for react-middle-ellipsis

License	MIT
Categories	React User Interface Web Frameworks
GroupId	org.webjars.npm
ArtifactId	react-middle-ellipsis
Last Version	1.1.0
Release Date	May 6, 2021
Type	jar
Description	react-middle-ellipsis WebJar for react-middle-ellipsis
Project URL	https://www.webjars.org
Source Code Management	https://github.com/bluepeter/react-middle-ellipsis

Download react-middle-ellipsis

Filename	Size
react-middle-ellipsis-1.1.0.pom
react-middle-ellipsis-1.1.0.jar	18 KB
react-middle-ellipsis-1.1.0-sources.jar	22 bytes
react-middle-ellipsis-1.1.0-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/react-middle-ellipsis/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>react-middle-ellipsis</artifactId>
    <version>1.1.0</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/react-middle-ellipsis/
implementation 'org.webjars.npm:react-middle-ellipsis:1.1.0'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/react-middle-ellipsis/
implementation ("org.webjars.npm:react-middle-ellipsis:1.1.0")

Apache Buildr

'org.webjars.npm:react-middle-ellipsis:jar:1.1.0'

Apache Ivy

<dependency org="org.webjars.npm" name="react-middle-ellipsis" rev="1.1.0">
  <artifact name="react-middle-ellipsis" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='react-middle-ellipsis', version='1.1.0')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "react-middle-ellipsis" % "1.1.0"

Leiningen

[org.webjars.npm/react-middle-ellipsis "1.1.0"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

React Middle Ellipsis

Check out the demo.

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

yarn add react-middle-ellipsis

Usage

Once imported, you can then wrap any node with <MiddleEllipsis>. 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!

import React from "react";
import MiddleEllipsis from "react-middle-ellipsis";

const Component = props => {
  return (
  <>
    <div style={{ width: "350px", whiteSpace: "nowrap" }}>
      <MiddleEllipsis>
        <span>
          I am some long text that should be ellipsed in the middle because
          the end contains important stuff.
        </span>
      </MiddleEllipsis>
    </div>
    <div style={{ width: "350px", whiteSpace: "nowrap" }}>
      <MiddleEllipsis>
        <span>
          Don't ellipse me.{" "}
          <span className="ellipseMe">
            I am some long text that should be ellipsed in the middle because
            the end contains important stuff.
          </span>
        </span>
      </MiddleEllipsis>
    </div>
  <>
  );
};

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.

License

MIT © bluepeter

Versions

Version
1.1.0 May 6, 2021