Newtonian Physics Mockumentary
    Wondering what’s next for npm?Check out our public roadmap! »

    react-text-more-less

    0.4.2 • Public • Published

    react-text-more-less

    NPM Version NPM Downloads MIT License Conventional Commits

    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
    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

    Change Log

    Change Log

    Licence

    MIT

    Install

    npm i react-text-more-less

    DownloadsWeekly Downloads

    452

    Version

    0.4.2

    License

    MIT

    Unpacked Size

    18.7 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar