React-ellipsis-component

A high performance and customized ellipsis component for react. Support to custom ellipsis char, custom ellipsis node, end char filter, rich text, ...etc.

Searching for a Vue library? Refer to vue-ellipsis-component and vue-ellipsis-3.

  

Doc

- English Docs
- 中文文档

Demo

!demo

API Referrer

$3

| Prop Name | Type | Default | Description |
| ----------------------- | --------- | -------- | ------------------------------------------------------------ |
| text | String | Required | Pure text that you want to ellipsis. Support \n to wrap with useJsEllipsis={true}. |
| maxLine | Number | 1 | Content will be truncated if the line count of content is bigger than maxLine. |
| maxHeight | Number | | Content will be truncated if the height of content is bigger than maxHeight. Priority higher than maxLine. |
| className | String | | Add className to component. |
| ellipsis | Boolean | true | Whether to ellipsis the text content. |
| ellipsisNode | ReactNode | … | Custom the ellipsis node. |
| endExcludes | String[] | [] | The characters that want to remove at the end(Before ellipsis char). |
| dangerouslyUseInnerHTML | Boolean | false | Parse text as html(Make sure the text that you pass is safe, or you may been attacked by XSS). |
| reflowOnResize | Boolean | | Whether update when container resize. Default true if native ellipsis support, otherwise false. |
| visibleLine | Number | maxLine | Line count of visible content(Can't bigger than maxLine). |
| visibleHeight | Number | | Visible height of content. Priority higher than visibleLine. |

$3

| Event Name | Type | Description |
| --------------- | ----------------------------------------- | ------------------------------------------------------------ |
| onReflow | (ellipsis: Boolean, text: String) => void | Reflow callback, ellipsis is whether the text have been truncated. text is the visible content after truncating(Not include ellipsis char). |
| onEllipsisClick | () => void | Ellipsis click callback. |

Buy Me A Coffee

Open source is not easy, you can buy me a coffee. _Note your name or github id so I can add you to the donation list._

Wechat Pay

Ali Pay

$3

❤️ Thanks these guys for donations. Contact me with email, if you had donated but not on the list.

| Donors | Amount | Time |
| --------------------------------------- | -------- | ---------------- |
| 07akioni | ￥ 20.01 | 2021-09-27 13:53 |

License

MIT

Resources

- Changelog

Develop & Contribution

``sh
cd react-ellipsis


install deps of component

yarn

to docs

cd docs

install deps of docs

yarn

dev

yarn dev

now you can develop in src or docs, then see the change in docs site.

default: localhost:3000

``

If you want to contribute your code, send a pull request in github.