vivaxy/react-text-more-less

📃React component to show more text or show less

react-text-more-less

Initialized by vivaxy/gt-npm-package.

Based on dollarshaveclub/shave.

See demo.

Installation

npm install react-text-more-less

yarn add react-text-more-less

Usage

import React, { Component } from 'react';
import ReactTextMoreLess from 'react-text-more-less';

class Demo extends Component {
  state = {
    collapsed: true,
  };

  render() {
    const { collapsed } = this.state;
    return (
      <ReactTextMoreLess
        collapsed={collapsed}
        text="1926年1—6月，他一连发表了四篇论文，题目都是《量子化就是本征值问题》，系统地阐明了波动力学理论。在此以前，德国物理学家W.K.海森堡、M.玻恩和E.P.约旦于1925年7—9月通过另一途径建立了矩阵力学。1926年3月，薛定谔发现波动力学和矩阵力学在数学上是等价的，是量子力学的两种形式，可以通过数学变换,从一个理论转到另一个理论。薛定谔起初试图把波函数解释为三维空间中的振动，把振幅解释为电荷密度，把粒子解释为波包。但他无法解决“波包扩散”的困难。最后物理学界普遍接受了玻恩提出的波函数的几率解释。"
        lessHeight={72}
        showMoreText="... 展示更多"
        showMoreElement={
          <span>
            ... <span className="show-more-text">展示更多</span>
          </span>
        }
        showLessElement={<span className="show-more-text">收起</span>}
        onClick={() => {
          this.setState({ collapsed: !collapsed });
        }}
      />
    );
  }
}

If you like to prevent collapse on user select, add this before setting collapsed.

const selection = window.getSelection();
if (!selection.toString()) {
  /* Set `collapsed` prop */
}

Props

name	type	isRequired	default	description
text	string	✔	N/A	text in the container Be careful with XSS attacks, #82
lessHeight	number	✔	N/A	container collapsed height
collapsed	bool	✖	true	is the container collapsed according to the lessHeight
className	string	✖	undefined	className of the container
showMoreText	string	✖	...	the ellipse text to show more
showMoreElement	element	✖	undefined	the element to show when container collapsed
showLessElement	element	✖	undefined	the element to show when container expanded
onClick	func	✖	() => {}	container click handler
rootProps	object	✖	{}	root container props, could be any props a div accepts

If showMoreElement supplied, showMoreText will be replaced, this props is useful when you want to custom showMoreText style or to use a more complex dom structure to display showMoreText.

Related Projects

• react-ellipsis-text
• react-truncate
• react-text-truncate
• shiitake
• react-read-more-read-less
• react-lines-ellipsis
• react-clamp-lines
• read-more-react

Change Log

Change Log

Licence

MIT

react-text-more-less's Issues

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

Add support for dangerouslySetInnerHTML

Currently the component only accepts text in string form, though sometimes the data is raw HTML which errors when passed. I get this error:

Warning: Failed prop type: Invalid prop `text` of type `object` supplied to `ReactTextMoreLess`, expected `string`.
    in ReactTextMoreLess

The PropTypes for text should be object so we can pass HTML data as well

can't run the demo on the local env

the webpack config doesn't compatible with webpack@5

Do not collapse on user select

As a user, when the content/text is not collapsed it should be possible to select the text (for copy/paste purpose).

The text content should not collapse when the user has selected the text with the mouse. But currently, when I try to select the text, it collapses.

Toggle collapse is not working

reproduce demo: https://codesandbox.io/s/serene-ramanujan-nn8e3?file=/src/App.js

@vivaxy could you have a look?

thank you

Risk of XSS attacks due to innerHTML

Here we set the content to innerHTML and this is prone to XSS attacks. Any alternatives for this?

Word limit

Big Brother, can you add a word limit function? Pixels feel strange.

Does not collapse on initial page load even though collapse is set to true

Currently, the element starts off fully rendered, then reduces its height if there's more content. It looks like a glitch and is not good user experience. Is there any way to resolve this?