react-text-ellipsis-component v0.0.3
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-componentProps
| 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
childrendescription in Storybook - React 18 Storybook issue (warnings during dependencies installation)