react-text-ellipsis-component
Advanced tools
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.
Feel free to check documentation and playground - storybook.
Feel free to check test create react app application - website, repository.
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.
The component available via npm.
npm i react-text-ellipsis-component
| 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 |
children description in StorybookFAQs
React component for ellipsis one-line text
The npm package react-text-ellipsis-component receives a total of 0 weekly downloads. As such, react-text-ellipsis-component popularity was classified as not popular.
We found that react-text-ellipsis-component demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.