@jamespotz/react-simple-readmore

React Simple Readmore

React component for animating height using Spring Factor.

Quick start

Get it from npm

$ npm install --save @jamespotz/react-simple-readmore

Note

For React >= 16.8 because of Hooks.

How to use

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import ReadMore from '@jamespotz/react-simple-readmore';
import text from './data';

const App = () => {
	const [shown, setShown] = useState(false);

	return (
		<ReadMore
			onClick={value => setShown(value)}
			fade
			btn={
				<button
					style={{
						background: `${shown ? 'red' : 'blue'}`,
						padding: '10px 15px',
						color: '#fff'
					}}
				>
					{shown ? 'Read Less' : 'Read More'}
				</button>
			}
			preset='wobbly'
		>
			<p
				dangerouslySetInnerHTML={{
					__html: text
				}}
			/>
		</ReadMore>
	);
};

ReactDOM.render(<App />, document.getElementById('root'));

Demo

Live Demo: https://codesandbox.io/embed/kind-night-bqd8e

To build the examples locally, run:

npm install
npm start

Then open localhost:3000 in your browser of choice.

API

Prop	Type	Default
minHeight	Number/String	50
displayHeight	Number/String	'auto'
btnText	Text/Component (props ignored if btn is present)
btnTextShown	Text/Component (props ignored if btn is present)
defaultShownOnLess	Text/Component
btn	Component
onClick	Function
btnClassName	String
btnStyles	Object
fade	Boolean
fadeHeight	Number	minHeight/2
colorStopTop	String	'rgba(255, 255, 255, 0)'
colorStopBottom	String	'white'
precision	Number	0.01
velocity	Number	0
mass	Number	1
stiffness	Number
damping	Number
prest	String of type ['noWobble', 'gentle', 'wobbly', 'stiff', 'slow', 'molasses']