Skip to content

A high performance and customized ellipsis component for react, support rich text. 高性能、高度自定义、支持富文本的 react 缩略组件。

License

Notifications You must be signed in to change notification settings

chenquincy/react-ellipsis

Repository files navigation

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

Demo

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.

Wechat Pay

Ali Pay

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

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.

About

A high performance and customized ellipsis component for react, support rich text. 高性能、高度自定义、支持富文本的 react 缩略组件。

Topics

Resources

License

Stars

Watchers

Forks