@sstraatemans/react-readmore NPM

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.

@infinitebrahmanuniverse/nolb-_ss @everything-registry/sub-chunk-862

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago