background

I have been working in Toutiao for nearly a year. I have heard UI feedback more than once in my daily work. The following experience bug occasionally appears in H5 of Toutiao App.

In the acronym “…” There will be a small percentage of punctuation in front, which will look unsightly. For such a long time, this problem has not been solved, because I have too much business at hand and do not pay attention to the needs of others.

Recently, I just finished the performance evaluation and was in a demand vacuum. I happened to think of this problem and solved it easily, precipitating a react thumbnail component. Considering that this is a very general requirement, we have made it open source.

The component is now available on Github with the address: React-Ellipsis (you can give it a star if you think it’s useful).

One might wonder, is there really no wheels available for such a common requirement? I did a search on NPM and Github with this question in mind and found that none of them fit the criteria completely…

Make one of your own. –

To build the wheels before

Before getting ready to tackle the problem, I looked through the existing thumbnail components on NPM and Github and picked out a few based on the number of stars

react-lines-ellipsis

By the post

  • Number of stars 376
  • Issue 15 is not processed
  • The last feature was updated 2 years ago

Question:

  • – No closing punctuation filter, only whitespace (this can be fixed by PR, but the author hasn’t dealt with PR in a long time)

  • Each Ellipsis component generates a hidden div to calculate, resulting in a significant performance loss

  • Height shortening is not supported

react-truncate

By the post

  • Number of stars 503
  • Issue 33 is not processed
  • Last feature update August ago

Question:

  • End punctuation filter is not supported. Only whitespace characters can be filtered
  • Cutting by word or letter is not supported
  • OnResize needs to be called by itself
  • When canvas is used, performance loss is serious when there are too many elements

The other components have more or less their own problems and can’t meet our needs, so just do it yourself.

The wheel is introduced

It took me an afternoon to finish it, and now I’m iterating to version 0.5.2.

Let’s start with a simple example

Tip: Container stretching is added for demonstration purposes. The actual component does not include stretching.

Implemented and planned features:

Completed function

  • Custom thumbnails
  • Custom thumbnail node points
  • Trailing character filtering
  • The thumbnail callback
  • Thumbnail click callback
  • The adaptive

In the plan

  • Split by word or letter
  • Support content newline
  • Support for wrappers
  • ResizeObserver is not supported when Windows. Onresize is compatible

For details and examples, see the React-Ellipsis documentation

Q & A

  • How to guarantee performance?

    In the cutting algorithm, most other components are cut into character arrays and reduced one by one until the container no longer overflows. The time complexity is O(n). React-ellipsis – Component uses binary cutting to reduce the time complexity to O(logn).

    Other components use hidden divs or canvas, and the performance loss is severe when ellipsis components are numerous.

    In terms of adaptation, ResizeObserver is used, while window.onresize (high performance loss) is used for other components.

  • compatibility

    Compatibility mainly lies in the adaptive thumbnail of ResizeObserver implementation. If no adaptive thumbnail is needed, it can cover most modern browsers. The react component itself does not rely on other libraries, and compatibility is guaranteed.

    Window. onresize compatibility logic will be added later to further improve compatibility.

    Attached: ResizeObserver compatibility table