react-show-more
DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-show-more package

2.0.0 • Public • Published

React Show More

NPM version Downloads Build status Coverage status Dependency status Dev dependency status

This is a convenience wrapper around react-truncate.

Install

$ npm install react-show-more

Usage

import ShowMore from 'react-show-more';
 
// ...
 
class Foo extends Component {
    render() {
        return (
            <ShowMore
                {* Default options *}
                lines={3}
                more='Show more'
                less='Show less'
                anchorClass=''
            >
                {longText}
            </ShowMore>
        );
    }
}

API

Prop Type Default Description Example
lines integer, boolean {false} 3 Specifies how many lines of text should be preserved until it gets truncated. false and any integer < 1 will result in the text not getting clipped at all. (false, -1, 0), 1, ...
children string, React node The text to be truncated. Anything that can be evaluated as text. 'Some text', <p>Some paragraph <a/>with other text-based inline elements<a></p>, <span>Some</span><span>siblings</span>
more string, React node 'Show more' The text to display in the anchor element to show more. 'Show more', <span>Show more</span>
less string, React node 'Show less' The text to display in the anchor element to show less. 'Show less', <span>Show less</span>
anchorClass string '' Class name(s) to add to the anchor elements. 'my-anchor-class', 'class-1 class-2'

Developing

Install development dependencies

$ npm install

Run tests

$ npm test

Run code linter

$ npm run lint

Compile to ES5 from /src to /lib

$ npm run compile

Package Sidebar

Install

npm i react-show-more

Weekly Downloads

6,517

Version

2.0.0

License

ISC

Unpacked Size

10.6 kB

Total Files

4

Last publish

Collaborators

  • gustavnikolaj
  • pablosichert