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.
| 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. |
| 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. |
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 
|
❤️ 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 |
MIT
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:3000If you want to contribute your code, send a pull request in github.