Skip to content

Read-More-More is a simple package for React that helps to implement 'read more' or 'read less' feature to any given text

License

Notifications You must be signed in to change notification settings

the-wrong-guy/read-more-more

Repository files navigation

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.

About

Read-More-More is a simple package for React that helps to implement 'read more' or 'read less' feature to any given text

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published