{"id":18401965,"url":"https://github.com/vimtor/use-line-clamp","last_synced_at":"2025-04-07T07:31:56.359Z","repository":{"id":65543197,"uuid":"594394279","full_name":"vimtor/use-line-clamp","owner":"vimtor","description":"React.js hook to detect if text will clamp in X number of lines.","archived":false,"fork":false,"pushed_at":"2023-01-28T12:38:56.000Z","size":28,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-02T06:02:04.180Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/use-line-clamp","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vimtor.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-28T12:19:26.000Z","updated_at":"2024-06-27T08:14:16.000Z","dependencies_parsed_at":"2023-02-15T16:15:50.710Z","dependency_job_id":null,"html_url":"https://github.com/vimtor/use-line-clamp","commit_stats":{"total_commits":6,"total_committers":1,"mean_commits":6.0,"dds":0.0,"last_synced_commit":"1530f44d72e28efe837296f4a83f6b6f261fb083"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vimtor%2Fuse-line-clamp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vimtor%2Fuse-line-clamp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vimtor%2Fuse-line-clamp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vimtor%2Fuse-line-clamp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vimtor","download_url":"https://codeload.github.com/vimtor/use-line-clamp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247612221,"owners_count":20966694,"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":[],"created_at":"2024-11-06T02:40:38.973Z","updated_at":"2025-04-07T07:31:56.110Z","avatar_url":"https://github.com/vimtor.png","language":"TypeScript","readme":"# use-line-clamp\n\nReact.js hook to detect if text will clamp in X number of lines. This allows you to use lines instead of character for implementing \"show more\" behaviour.\n\n\n[**See live demo**](https://stackblitz.com/edit/use-line-clamp?file=App.tsx)\n\nhttps://user-images.githubusercontent.com/36263538/215266290-49dbc549-f710-402b-bc9e-9cc97215d829.mp4\n\n## Install\n\n```sh\nnpm install use-line-clamp\n\npnpm install use-line-clamp\n\nyarn add use-line-clamp\n```\n\n## Usage\n\n```tsx\nimport { useRef, useState } from \"react\";\nimport useLineClamp from \"use-line-clamp\";\n\nfunction Example() {\n  const ref = useRef\u003cHTMLParagraphElement\u003e(null);\n  const clamps = useLineClamp(ref, { lines: 4 });\n  const [visible, setVisible] = useState(false);\n\n  return (\n    \u003cdiv\u003e\n      \u003cp ref={ref} className={visible ? \"\" : \"line-clamp-4\"}\u003e\n        Lorem, ipsum dolor sit amet consectetur adipisicing elit. In consectetur\n        doloremque molestiae perspiciatis aliquam voluptatem natus quod quia\n        repellendus? Vero veniam quidem quae veritatis voluptas ratione\n        doloremque. Quo, saepe quidem. Inventore voluptatibus ipsam totam nobis\n        magni molestiae ea culpa animi?\n      \u003c/p\u003e\n      {clamps \u0026\u0026 (\n        \u003cbutton onClick={() =\u003e setVisible(!visible)}\u003e\n          Show {visible ? \"less\" : \"more\"}\n        \u003c/button\u003e\n      )}\n    \u003c/div\u003e\n  );\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvimtor%2Fuse-line-clamp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvimtor%2Fuse-line-clamp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvimtor%2Fuse-line-clamp/lists"}