@jamespotz/react-simple-readmore v1.0.0

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