React-ellipsis-component NPM

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.

npm.io npm.io

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.

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.

resize-observer-polyfill

@infinitebrahmanuniverse/nolb-react-el @everything-registry/sub-chunk-2553 @cc-apps/core @i-novus/ui-core

11 months ago

3 years ago

3 years ago

4 years ago