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