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.