# @sstraatemans/react-readmore

> a fully customizable read more component for React

Latest version **1.0.5** (published 2021-02-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @sstraatemans/react-readmore
pnpm add @sstraatemans/react-readmore
yarn add @sstraatemans/react-readmore
bun add @sstraatemans/react-readmore
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2021-02-22 |
| First published | 2021-01-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 20.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 14 |
| Author | Steven Straatemans |
| Maintainers | sstraatemans |

## Links

- npm: https://www.npmjs.com/package/@sstraatemans/react-readmore
- Repository: https://github.com/sstraatemans/react-read-more
- Homepage: https://react-read-more.vercel.app/
- Issues: https://github.com/sstraatemans/react-read-more/issues
- npm.io page: https://npm.io/package/@sstraatemans/react-readmore

## Recent versions

- 1.0.5 (latest) — 2021-02-22
- 1.0.4 — 2021-01-10
- 1.0.3 — 2021-01-07
- 1.0.2 — 2021-01-07
- 1.0.1 — 2021-01-07

## README

<p align="center">
  <b>React Read More</b> is a simple, fully customizable component which gives you the ability to truncate a large text, by line, character or word count.
 <br/>
  <img alt="npm" src="https://img.shields.io/npm/v/@sstraatemans/react-readmore">
  <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/min/@sstraatemans/react-readmore">
</p>

## Install

```bash
$ 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

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

### Style button

```js
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

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

### overwrite label names

```js
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.

---
_Source: https://npm.io/package/@sstraatemans/react-readmore · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._