React Text Ellipsis Component

React component for ellipsis one-line text with tooltip. Ready for work as a text component for large tables and adapted for convenient work with text and browser search friendly.

Live

Story book

Feel free to check documentation and playground - storybook.

Test CRA app

Feel free to check test create react app application - website, repository.

Description

The component is zero dependency and made with React 18 as peer-dependency, typescript, postcss, rollup, babel, storybook, jest, eslint, stylelint as dev-dependencies. It uses Github CI for CI and Netlify for Storybook deployment.

The component is made by display: flex; because display: inline-block; breaks the primary goal of the component: to have an ellipsis in the middle of the text. It doesn't use JavaScript for the main logic so it operates very fast. Browser search logic works from scatch, copying (including cross columns) made by custom JavaScript but it doesn't affect rendering.

The tooltip is pretty simple and could be easily updated to full-featured if necessary.

Installation

The component available via npm.

npm i react-text-ellipsis-component

Props

Name	Type	Optional	Description
children	string		Text
tailLength	number		Length of the tail that will be persistent in a case of ellipsis
title	string	✅	Tooltip text
className	string	✅	Custom class for main component container

TODO

• Tooltip logic for touch-devices
• Tests for non-trivial cases: ellipsis, text copying, text searching
• Minor issue with required children description in Storybook
• React 18 Storybook issue (warnings during dependencies installation)