# react-read-more

> React component for truncating multi-line spans and adding an ellipsis

Latest version **1.0.0** (published 2016-10-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-read-more
pnpm add react-read-more
yarn add react-read-more
bun add react-read-more
```

## 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.0 |
| Published | 2016-10-25 |
| First published | 2016-10-25 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Huy T. |
| Maintainers | huytbt |
| Keywords | react, truncate, ellipsis, readmore, multiline |

## Links

- npm: https://www.npmjs.com/package/react-read-more
- Repository: https://github.com/huytbt/react-read-more
- Issues: https://github.com/huytbt/react-read-more/issues
- npm.io page: https://npm.io/package/react-read-more

## Dependencies (1)

- [rimraf](https://npm.io/package/rimraf.md) ^2.5.4

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2016-10-25

## README

# React Read More

Read more React component

This package re-distribute from (React-Truncate)[https://github.com/One-com/react-truncate] (Copyright (c) 2016, One.com)

## Install
```
npm install react-read-more
```

## Usage
```js
import {Truncate} from 'react-read-more';

// ...

class Foo extends Component {
    render() {
        return (
            <Truncate lines={3} ellipsis={<span>... <a href='/link/to/article'>Read more</a></span>}>
                {longText}
            </Truncate>
        );
    }
}
```

```js
import {ReadMore} from 'react-read-more';

// ...

class Foo extends Component {
    render() {
        return (
            <ReadMore lines={3} onShowMore={this.props.onChange} text="more">
                {longText}
            </ReadMore>
        );
    }
}
```

## API
| Prop | Type | Default | Description | Example |
| ---- | ---- | ------- | ----------- | ------- |
| lines | integer, boolean {false} | 1 | Specifies how many lines of text should be preserved until it gets truncated. `false` and any integer < 1 will result in the text not getting clipped at all. | (`false`, `-1`, `0`), `1`, ...  |
| ellipsis | string, React node | '…' | An ellipsis that is added to the end of the text in case it is truncated. | `'...'`, `<span>...</span>`, `<span>... <a href='#' onClick={someHandler}>Read more</a></span>`, `[<span key='some'>Some</span>, <span key='siblings'>siblings<span>]`
| children | string, React node | | The text to be truncated. Anything that can be evaluated as text. | `'Some text'`, `<p>Some paragraph <a/>with other text-based inline elements<a></p>`, `<span>Some</span><span>siblings</span>` |
| onTruncate | function | | Gets invoked on each render. Gets called with `true` when text got truncated and ellipsis was injected, and with `false` otherwise. | `isTruncated => isTruncated !== this.state.isTruncated && this.setState({ isTruncated })` |

## Developing
Install system libraries needed for development dependencies
- https://github.com/Automattic/node-canvas#installation

Install development dependencies
```
npm install
```

Run tests
```
npm test
```

Run code linter
```
npm run lint
```

Compile to ES5 from /src to /lib
```
npm run compile
```

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