Install

$ npm install react-readmore --save-dev

Test

You can test the functionality of the app by going to
https://react-read-more.sstraatemans.vercel.app/

Usage

Basic

import ReadMore from 'react-readmore';
const App: React.FC = () => {
    return <ReadMore maxLines="{3}">Lorem ipsum dolor sit amet, consectetur...</ReadMore>;
};

Style button

import ReadMore from 'react-readmore';
const App: React.FC = () => {
    return (
        <ReadMore maxLines="{3}" buttonClassName="class-name">
            Lorem ipsum dolor sit amet, consectetur...
        </ReadMore>
    );
};

overwrite ellipsis

import ReadMore from 'react-readmore';
const App: React.FC = () => {
    return (
        <ReadMore maxLines="{3}" ellipsis="***">
            Lorem ipsum dolor sit amet, consectetur...
        </ReadMore>
    );
};

overwrite label names

import ReadMore from 'react-readmore';
const App: React.FC = () => {
    return (
        <ReadMore maxLines="{3}" readMoreLabel="Lees meer" readLessLabel="Lees minder">
            Lorem ipsum dolor sit amet, consectetur...
        </ReadMore>
    );
};

Parameters

| Name | Description | Type | Default value | | --------------- | :-------------------------------------------- | :----- | :------------ | | maxCharacters | the max. amount of characters before truncate | number | null | | maxLines | the max. amount of lines before truncate | number | null | | maxWords | the max. amount of words before truncate | number | null | | ellipsis | the ellipsis | string | ... | | readMoreLabel | the label of the read more button | string | read more | | readLessLabel | the label of the read less button | string | read less | | buttonClassName | the classname to style the button | string | null |

Either MaxWords, MaxCharacters or MaxLines is mandatory

License

react-readmore is licensed under the MIT license.