Package Exports
- react-text-expand
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-text-expand) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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 })}}
/>
);
}
}
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
.