React-more-less-text NPM

React Show More Text

The text surrounded by the component will be truncated. Anything surrounded by the component could be evaluated as text. The component react-show-more-text/ShowMoreText is fork of react-show-more/ShowMore, applied improvements, works with React 16.x.x, added onClick event.

Demo

https://www.devzonetech.com/demo/react-show-more-text/build/

Install

$ npm install react-show-more-text

Usage

import ShowMoreText from 'react-show-more-text';

// ...

class Foo extends Component {

    executeOnClick(isExpanded) {
        console.log(isExpanded);
    }

    render() {
        return (
            <ShowMoreText
                {* Default options *}
                lines={3}
                more='Show more'
                less='Show less'
                anchorClass=''
                onClick={this.executeOnClick}
                expanded={false}
            >
                {longText}
            </ShowMoreText>
        );
    }
}

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'`
onClick	Function		Function executed on click on 'Show more' or 'Show less'	`onClick={this.executeOnClick}`
expanded	boolean	'false'	Control the text to be shown as expanded	`expanded={true}`

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

react show more ellipsis multiline show more text show partial text hide partial text show-more fix show text hide text

prop-types react-truncate

@infinitebrahmanuniverse/nolb-react-mo @everything-registry/sub-chunk-2568

1.2.4

6 years ago

1.2.3

6 years ago