npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-make-ellipsis

v1.1.7

Published

long text show with ellipsis, support custom ellipsis and auto width

Downloads

2,237

Readme

react-make-ellipsis · GitHub license npm version

Ellipsis component for React.

Installation

Using npm:

$ npm install --save react-make-ellipsis

Demo

storybook

Example

import React from 'react';
import ReactDOM from 'react-dom';
import Ellipsis from 'react-make-ellipsis';

const text = 'very long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long text';

const App = (
  <div>
    <div id="provide width">
      <Ellipsis 
        style={{ width: '50%', minWidth: 100 }}
        text={text}
        minFontSizeRadio={0.6}
        flex
      />
    </div>
    <div id="provide-container-node-which-has-width" style={{ width: 300 }}>
      <span style={{ display: 'inline-block', width: 100 }}>label</span>
      <Ellipsis
        containerNode="#provide-container-node-which-has-width" // the selector of the container node. the element variable is also supported.
        containerLeftSpace={100} // 100 is the width of label
        text={text}
        minFontSizeRadio={0.6}
        flex
      />
    </div>
    <div id="provide-container-node-which-has-width" style={{ width: 300 }}>
      <span className="container-left-node" style={{ display: 'inline-block' }}>prefix</span>
      <Ellipsis
        containerNode="#provide-container-node-which-has-width" // the selector of the container node. the element variable is also supported.
        containerLeftNodes=".container-left-node"
        text={text}
        minFontSizeRadio={0.6}
        flex
      />
      <span className="container-left-node" style={{ display: 'inline-block' }}>postfix</span>
    </div>
    <div id="provide-container-node-which-has-width" style={{ width: 500 }}>
      <Ellipsis
        containerNode="#provide-container-node-which-has-width" // the selector of the container node. the element variable is also supported.
        maxWidth={300} // the show text width will not longer than 300 not 500
        text={text}
        minFontSizeRadio={0.6}
        flex
      />
    </div>
    <div style={{ display: 'inline-block', width: 200 }}>left space</div>
  </div>
);

const root = document.getElementById('root');
ReactDOM.render(<App />, root);

Properties

  • text? - string

    The text content.

  • width? - number

    the component width. the width in style is also supported. this prop will override the width in style prop.

  • maxWidth? - number

    the component max width. the maxWidth in style is also supported. this prop will override the maxWidth in style prop. If the given width ( the width prop or width in style prop or the width of containerNode minus containerLeftSpace ) is greater than the max width, the max width will be used to calculate the show text.

  • minWidth? - number

    the component min width. the minWidth in style is also supported. this prop will override the minWidth in style prop. If the given width ( the width prop or width in style prop or the width of containerNode minus containerLeftSpace ) is smaller than the min width, the min width will be used to calculate the show text.

  • minFontSize? - number|string

    When specify, enable the auto font size mode. If the text size is too long for the container, reduce the font size until it fit the container or equal minFontSize. Support string with unit px, pt, % and number means px

  • minFontSizeRadio? - number

    When specify, enable the auto font size mode. If the text size is too long for the container, reduce the font size until it fit the container or equal minFontSizeRadio * initialFontSize. Range from 0 to 1.

  • style? - CSSProperties

    The component style.

  • className? - string

    The component className.

  • ellipsis? - ReactNode - <span> ...</span>

    The custom ellipsis component.

  • onEllipsis? - (showEllipsis: boolean, showText: string, text?: string) => void

    callback when show text changed.

  • flex? - boolean - false

    The flex mode. work well when the text is in a flex container and the browser support flex feature.

  • containerNode? - Element | string

    the container node which use to calc the content width. The selector is also supported.

  • containerLeftSpace? - number

    the content width is ( the width of containerNode or the node which container the component ) - containerLeftSpace

  • containerLeftNodes? - string | Element | Element[]

    the nodes used to calc the containerLeftSpace. will be omitted if containerLeftSpace has been used. The selector is also supported.

Ref object

  • update - () => void

    Force recalc the ellipsis.

  • showText - string

    The text shown.

  • showEllipsis - boolean

    whether ellipsis show or not.

  • node - HTMLNode

    the component root node.

Note

The component require its width not depend on its content. Because its real content depends on its width. So a computed width should be provide. It can be provided by the width prop, the width in style prop or the width of containerNode prop. If the width prop is a percent value, one ancestor of the component should has a concrete width. The flex model is encouraged, because it support providing the width without specify concrete width.