@kamran.gh/react-read-more

    1.0.3 • Public • Published

    React Read More

    Read more React component

    This package re-distribute from React-Truncate (Copyright (c) 2016, One.com)

    Install

    npm install react-read-more
    

    Usage

    import {Truncate} from 'react-read-more';
     
    // ...
     
    class Foo extends Component {
        render() {
            return (
                <Truncate lines={3} ellipsis={<span>... <a href='/link/to/article'>Read more</a></span>}>
                    {longText}
                </Truncate>
            );
        }
    }
    import {ReadMore} from 'react-read-more';
     
    // ...
     
    class Foo extends Component {
        render() {
            return (
                <ReadMore lines={3} onShowMore={this.props.onChange} text="more">
                    {longText}
                </ReadMore>
            );
        }
    }

    API

    Prop Type Default Description Example
    lines integer, boolean {false} 1 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, ...
    ellipsis string, React node '…' An ellipsis that is added to the end of the text in case it is truncated. '...', <span>...</span>, <span>... <a href='#' onClick={someHandler}>Read more</a></span>, [<span key='some'>Some</span>, <span key='siblings'>siblings<span>]
    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>
    onTruncate function Gets invoked on each render. Gets called with true when text got truncated and ellipsis was injected, and with false otherwise. isTruncated => isTruncated !== this.state.isTruncated && this.setState({ isTruncated })

    Developing

    Install system libraries needed for development dependencies

    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
    

    Install

    npm i @kamran.gh/react-read-more

    DownloadsWeekly Downloads

    1

    Version

    1.0.3

    License

    ISC

    Unpacked Size

    20.9 kB

    Total Files

    6

    Last publish

    Collaborators

    • kamran.gh