Ninja Pokémon Master

    read-more-more

    2.0.2 • Public • Published

    Read-More-More

    Read-More-More is a simple pakage for react that helps to implement 'read more' or 'read less' feature to any given text, you can limit the number of chracters in string/text to give the "read more" text at the end, also if you have a HTML String that you want to convert it to React element, you can do that too by add parseHtml prop

    Motivation

    I was working on a project where i needed to use "read more/less" button , cause of the huge "HTML String" I was getting from an API and I tried finding libraries to add "read more/less" feature to the text but the problem was that in those libraries there was not any options for parsing HTML string to React element , which was serious need for me.Also I tried parsing the text that i was getting from other 'read more' libraries but that didn't work too. So finally I decided to make my own 'read more/less' library and here we are.

    Update 2.0.0

    This update brings you a new advance read-more-more, it calculates the actual height of the sentences when it opens, also recalculates the height if the window resizes so it makes the transition smoother. And I named this method AdvReadMoreMore 😬, I know its pretty basic 😂.

    Hope you all will love this new update and as always critisims are always welcomed.

    How to Use

    With React

    Read-More-More is extraordinarily simple to use with react. For starters you only have to provide text prop and it's required.

    Install

    npm install  read-more-more
    
    

    Import

    import {ReadMoreMore, AdvReadMoreMore} from 'read-more-more';
    

    Use

    <ReadMoreMore text={yourTextHere} /> or <AdvReadMoreMore text={yourTextHere} /> , add other props according to your needs
    
    Props type Default Value Defination
    text string null add the text you want to "read more/less" to it
    checkFor number 300 np how many characters it should check to add "read more"
    btnStyles object null pass custom styles to "read more/less" button
    transDuration number 2s transition duration for the read more/less collapsing
    transType string linear transition type for the read more/less collapsing
    linesToShow number 3 intial number of lines to show
    parseHtml boolean false to parse html string to react element
    readMoreText string read more... replace the default "read more..." with your own text
    readLessText string read less... replace the default "read less..." with your own text
    textStyles object null styles the text container along with the text

    Addition props for AdvReadMoreMore

    Props type Default Value Defination
    lineHeight number 20 (i.e. 20px) line height of the text
    fontSize number 15 (i.e.15px) font size of the text
    color string #000 color of the text

    Note : textStyles prop is not suppported in AdvReadMoreMore

    Demo

    Click here

    Report Bugs

    Report

    Contributing

    Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

    Versioning

    We use SemVer for versioning.

    Install

    npm i read-more-more

    DownloadsWeekly Downloads

    175

    Version

    2.0.2

    License

    AGPL-3.0

    Unpacked Size

    68.4 kB

    Total Files

    9

    Last publish

    Collaborators

    • the-wrong-guy