react-middle-ellipsis alternatives and similar libraries
Based on the "Utilities" category.
Alternatively, view react-middle-ellipsis alternatives based on common mentions on social networks and blogs.
-
react-on-rails
Integration of React + Webpack + Rails + rails/webpacker including server-side rendering of React, enabling a better developer experience and faster client performance. -
react-unity-webgl
React Unity WebGL provides a modern solution for embedding Unity WebGL builds in your React Application while providing advanced APIs for two way communication and interaction between Unity and React. -
react-stripe-checkout
Load stripe's checkout.js as a react component. Easiest way to use checkout with React. -
backbone-react-component
A bit of nifty glue that automatically plugs your Backbone models and collections into your React components, on the browser and server -
<qr-code>
A no-framework, no-dependencies, customizable, animate-able, SVG-based <qr-code> HTML element. -
react-fetching-library
Simple and powerful API client for react 👍 Use hooks or FACCs to fetch data in easy way. No dependencies! Just react under the hood. -
react-translate-component
A component for React that utilizes the Counterpart module to provide multi-lingual/localized text content. -
gl-react
OpenGL / WebGL bindings for React to implement complex effects over images and content, in the descriptive VDOM paradigm. -
react-children-utilities
Extended utils for ⚛️ React.Children data structure that adds recursive filter, map and more methods to iterate nested children. -
gl-react-dom
WebGL bindings for React to implement complex effects over images and content, in the descriptive VDOM paradigm -
react-screen-wake-lock
🌓 React implementation of the Screen Wake Lock API. It provides a way to prevent devices from dimming or locking the screen when an application needs to keep running -
Redux Slim Async
:alien: A Redux middleware to ease the pain of tracking the status of an async action -
react-slack-notification
React Slack Notification is a lightweight package, Send messages to a Slack channel directly from your react app.
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of react-middle-ellipsis or a related project?
README
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
yarn add react-middle-ellipsis
Usage
Once import
ed, 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
*Note that all licence references and agreements mentioned in the react-middle-ellipsis README section above
are relevant to that project's source code only.