{"id":14982001,"url":"https://github.com/irene-24/react-truncatable","last_synced_at":"2025-10-29T11:31:12.075Z","repository":{"id":188344180,"uuid":"678162539","full_name":"Irene-24/react-truncatable","owner":"Irene-24","description":"Streamline your UI with this React component that is designed to truncate text seamlessly. [Storybook Doc] https://64f883177ec11e1edcf84fc7-hpmuefbevq.chromatic.com/?path=/docs/stories-truncatable--docs","archived":false,"fork":false,"pushed_at":"2023-09-17T10:56:12.000Z","size":315,"stargazers_count":2,"open_issues_count":1,"forks_count":2,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-02-02T01:04:24.538Z","etag":null,"topics":["react","storybook","testing","truncate-text"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-truncatable","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Irene-24.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-08-13T22:16:45.000Z","updated_at":"2024-07-10T11:15:20.000Z","dependencies_parsed_at":"2023-08-15T00:00:49.946Z","dependency_job_id":"dbeb7476-27a4-4fe7-b920-14a0b8a68fb1","html_url":"https://github.com/Irene-24/react-truncatable","commit_stats":null,"previous_names":["irene-24/react-truncatable"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Irene-24%2Freact-truncatable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Irene-24%2Freact-truncatable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Irene-24%2Freact-truncatable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Irene-24%2Freact-truncatable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Irene-24","download_url":"https://codeload.github.com/Irene-24/react-truncatable/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238817354,"owners_count":19535515,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","storybook","testing","truncate-text"],"created_at":"2024-09-24T14:04:38.023Z","updated_at":"2025-10-29T11:31:06.755Z","avatar_url":"https://github.com/Irene-24.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Truncatable\n\n[![NPM Publish](https://github.com/Irene-24/react-truncatable/actions/workflows/Build-deploy-npm.yaml/badge.svg)](https://github.com/Irene-24/react-truncatable/actions/workflows/Build-deploy-npm.yaml)\n\n[![Deploy storybook via chromatic](https://github.com/Irene-24/react-truncatable/actions/workflows/Deploy-chromatic.yaml/badge.svg)](https://github.com/Irene-24/react-truncatable/actions/workflows/Deploy-chromatic.yaml)\n\n## Overview\n\nA React component that truncates text based on available space and supports multiline. Perfect for creating article previews, blog snippets, product card descriptions and many more.\n\nCompatible with Next 13\n\n## Install\n\nIt can be installed with npm, yarn or pnpm\n\n### npm\n\n```sh\n  npm install react-truncatable\n```\n\n### yarn\n\n```sh\n  yarn add react-truncatable\n```\n\n### pnpm\n\n```sh\n  pnpm install react-truncatable\n```\n\n### **Usage**\n\nInclude the css in `_app.(tsx|jsx|js)` or `index.(tsx|jsx|js)`or `app.(tsx|jsx|js)`, or whatever is the root jsx file.\n\n```jsx\nimport \"react-truncatable/style.css\"\n```\n\nInclude the import at the top, where the Truncatable will be used:\n\n```jsx\nimport Truncatable from \"react-truncatable\";\n```\n\nand use like so\n\n```jsx\n\u003cTruncatable content=\"Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore quae quas fugit repudiandae. A cumque dicta expedita, omnis ex voluptatibus eum quaerat ipsum molestiae id qui cum saepe labore inventore voluptas ipsam necessitatibus mollitia. Libero eum aliquam officiis sit reiciendis nihil hic suscipit delectus doloremque doloribus magnam, eligendi sequi!\" /\u003e\n```\n\nYou can also import the types, and use them if you need them (TS only)\n\n```jsx\n\nimport Truncatable, { ToggleProps } from \"react-truncatable\";\n\nconst b: Omit\u003cToggleProps, \"togglerRef\"\u003e = {\n  showAll: true,\n  toggle() {\n\n  },\n};\n\nconsole.log(b);\n\n```\n\n### **Help  and Questions**\n\nRaise an issue [here](https://github.com/Irene-24/react-truncatable/issues/new)\n\n### **Support the project**\n\nDon't forget to star the repository if it was helpful to you.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Firene-24%2Freact-truncatable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Firene-24%2Freact-truncatable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Firene-24%2Freact-truncatable/lists"}