react-show-more-text

Convenience wrapper around react-truncate

Showing:

Popularity

Downloads/wk

17K

GitHub Stars

36

Maintenance

Last Commit

3mos ago

Contributors

7

Package

Dependencies

2

License

ISC

Type Definitions

Tree-Shakeable

No?

Reviews

Average Rating

5.0/51
Read All Reviews
tristanmarsh

Top Feedback

1Great Documentation
1Easy to Use

Readme

React Show More Text 1.5.0

NPM version Downloads Build status Dependency status

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"
                className="content-css"
                anchorClass="my-anchor-css-class"
                onClick={this.executeOnClick}
                expanded={false}
                width={280}
                truncatedEndingComponent={"... "}
            >
                Lorem ipsum dolor sit amet, consectetur{" "}
                <a
                    href="https://www.yahoo.com/"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    yahoo.com
                </a>{" "}
                adipiscing elit, sed do eiusmod tempor incididunt
                <a
                    href="https://www.google.bg/"
                    title="Google"
                    rel="nofollow"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    www.google.bg
                </a> ut labore et dolore magna amet, consectetur adipiscing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex Lorem ipsum dolor sit amet, consectetur adipiscing
                elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                laboris nisi ut aliquip ex Lorem ipsum dolor sit amet, consectetur
                adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            </ShowMoreText>
        );
    }
}

API

PropTypeDefaultDescriptionExample
linesinteger, boolean {false}3Specifies 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, ...
childrenstring, React nodeThe 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>
morestring, React node'Show more'The text to display in the anchor element to show more.'Show more', <span>Show more</span>
lessstring, React node'Show less'The text to display in the anchor element to show less.'Show less', <span>Show less</span>
classNamestring''Class name(s) to add on component content wrapper div.'wrapper-class', 'wrapper-class-1 wrapper-class-2'
anchorClassstring''Class name(s) to add to the anchor elements.'my-anchor-class', 'class-1 class-2'
onClickFunctionFunction executed on click on 'Show more' or 'Show less'onClick={this.executeOnClick}
expandedboolean'false'Control the text to be shown as expandedexpanded={true}
widthnumber0If not 0, the calculation of the content will be based on this number.
keepNewLinesboolean'false'Controls the new lines in text to be kept or not. When set to true, only strings can be passed in as children, and not html nodes.keepNewLines={true}
truncatedEndingComponentstring'...'Control the text to be shown at the end of short texttruncatedEndingComponent={'... '}

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

Rate & Review

Great Documentation1
Easy to Use1
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
Tristan MarshAustralia50 Ratings53 Reviews
Front End Developer in Melbourne, Australia
August 20, 2020
Great Documentation
Easy to Use

Life saver of a package for an annoying to implement yet often requested feature.


0

Tutorials

No tutorials found
Add a tutorial