{"id":13422501,"url":"https://github.com/bluepeter/react-middle-ellipsis","last_synced_at":"2025-08-20T12:30:56.759Z","repository":{"id":46788423,"uuid":"187924040","full_name":"bluepeter/react-middle-ellipsis","owner":"bluepeter","description":"Truncate a long string in the middle, instead of the end.","archived":false,"fork":false,"pushed_at":"2022-12-01T04:26:22.000Z","size":1306,"stargazers_count":63,"open_issues_count":7,"forks_count":10,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-12-16T03:41:47.754Z","etag":null,"topics":["react","react-component","reactjs"],"latest_commit_sha":null,"homepage":"https://bluepeter.github.io/react-middle-ellipsis/","language":"JavaScript","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/bluepeter.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}},"created_at":"2019-05-21T22:43:53.000Z","updated_at":"2024-09-12T05:56:21.000Z","dependencies_parsed_at":"2023-01-22T17:15:10.574Z","dependency_job_id":null,"html_url":"https://github.com/bluepeter/react-middle-ellipsis","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluepeter%2Freact-middle-ellipsis","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluepeter%2Freact-middle-ellipsis/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluepeter%2Freact-middle-ellipsis/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluepeter%2Freact-middle-ellipsis/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bluepeter","download_url":"https://codeload.github.com/bluepeter/react-middle-ellipsis/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230423559,"owners_count":18223435,"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","react-component","reactjs"],"created_at":"2024-07-30T23:00:46.334Z","updated_at":"2024-12-19T11:11:18.308Z","avatar_url":"https://github.com/bluepeter.png","language":"JavaScript","funding_links":[],"categories":["Utilities"],"sub_categories":["Miscellaneous"],"readme":"# React Middle Ellipsis\n\n[Check out the demo.](https://bluepeter.github.io/react-middle-ellipsis/)\n\nAdding ellipses to the end of long text is cool. But not always! Sometimes the\nend of the text contains vital information, particularly for URLs or filenames.\n\nThis React component is designed with that use case in mind.\n\n## Install\n\n```bash\nyarn add react-middle-ellipsis\n```\n\n## Usage\n\nOnce `import`ed, you can then wrap any node with `\u003cMiddleEllipsis\u003e`. This will\ncompute the width of the surrounding parent node. Then, it will look for the\nchild node (so make sure to add a `span` at minimum internally): it will use\nthis element to compute the width of the child, and then shorten the text\nelement whose class is `ellipseMe` (optional) to fit within the parent.\n\nThe component re-computes things if the browser window is resized, too!\n\n```jsx\nimport React from \"react\";\nimport MiddleEllipsis from \"react-middle-ellipsis\";\n\nconst Component = props =\u003e {\n  return (\n  \u003c\u003e\n    \u003cdiv style={{ width: \"350px\", whiteSpace: \"nowrap\" }}\u003e\n      \u003cMiddleEllipsis\u003e\n        \u003cspan\u003e\n          I am some long text that should be ellipsed in the middle because\n          the end contains important stuff.\n        \u003c/span\u003e\n      \u003c/MiddleEllipsis\u003e\n    \u003c/div\u003e\n    \u003cdiv style={{ width: \"350px\", whiteSpace: \"nowrap\" }}\u003e\n      \u003cMiddleEllipsis\u003e\n        \u003cspan\u003e\n          Don't ellipse me.{\" \"}\n          \u003cspan className=\"ellipseMe\"\u003e\n            I am some long text that should be ellipsed in the middle because\n            the end contains important stuff.\n          \u003c/span\u003e\n        \u003c/span\u003e\n      \u003c/MiddleEllipsis\u003e\n    \u003c/div\u003e\n  \u003c\u003e\n  );\n};\n\nexport default Component;\n```\n\n## Development\n\nNotes for developing this component.\n\n`yarn \u0026\u0026 yarn run start` in this directory and separately also in `/example`.\nThis will live reload any changes made in `/src`.\n\nChange the version number in `package.json` and `npm publish` once\ncomplete.Then, go to Github Releases and follow the instructions to publish a\nnew version there too.\n\n## License\n\nMIT © [bluepeter](https://github.com/bluepeter)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbluepeter%2Freact-middle-ellipsis","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbluepeter%2Freact-middle-ellipsis","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbluepeter%2Freact-middle-ellipsis/lists"}