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

API Referrer

Props

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

Events

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

Donation List

❤️ 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

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.