{"id":24884284,"url":"https://github.com/nirtamir2/solid-wrap-balancer","last_synced_at":"2025-10-16T03:30:37.763Z","repository":{"id":65180754,"uuid":"585937497","full_name":"nirtamir2/solid-wrap-balancer","owner":"nirtamir2","description":"Simple Solid Component That Makes Titles More Readable. Port of react-wrap-balancer to Solid.js","archived":false,"fork":false,"pushed_at":"2023-06-19T07:31:28.000Z","size":3799,"stargazers_count":23,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-24T20:38:18.524Z","etag":null,"topics":["readable","solid-start","solidjs","text","wrap-balancer"],"latest_commit_sha":null,"homepage":"https://solid-wrap-balancer.vercel.app","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/nirtamir2.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-06T13:52:04.000Z","updated_at":"2024-10-14T18:40:17.000Z","dependencies_parsed_at":"2024-10-10T03:30:23.113Z","dependency_job_id":"cc429994-0969-4bc5-9109-781f6d1f8183","html_url":"https://github.com/nirtamir2/solid-wrap-balancer","commit_stats":{"total_commits":44,"total_committers":2,"mean_commits":22.0,"dds":"0.15909090909090906","last_synced_commit":"853542d7b0a3ec6fa5cdb50210019e1ab78850f4"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":"solidjs-community/solid-lib-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nirtamir2%2Fsolid-wrap-balancer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nirtamir2%2Fsolid-wrap-balancer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nirtamir2%2Fsolid-wrap-balancer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nirtamir2%2Fsolid-wrap-balancer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nirtamir2","download_url":"https://codeload.github.com/nirtamir2/solid-wrap-balancer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":236672923,"owners_count":19186842,"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":["readable","solid-start","solidjs","text","wrap-balancer"],"created_at":"2025-02-01T14:26:42.983Z","updated_at":"2025-10-16T03:30:37.171Z","avatar_url":"https://github.com/nirtamir2.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp\u003e\n  \u003cimg width=\"100%\" src=\"https://assets.solidjs.com/banner?type=solid-wrap-balancer\u0026background=tiles\u0026project=%20\" alt=\"solid-wrap-balancer\"\u003e\n\u003c/p\u003e\n\n# solid-wrap-balancer\n\n[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge\u0026logo=pnpm)](https://pnpm.io/)\n\n[![npm version](https://badge.fury.io/js/solid-wrap-balancer.svg)](https://badge.fury.io/js/solid-wrap-balancer)\n\nThis project is a port of [react-wrap-balancer](https://github.com/shuding/react-wrap-balancer) made by [Shu Ding](https://twitter.com/shuding_) to solid.js\n\nSimple Solid.js Component That Makes Titles More Readable\n\n![Example](/example.png)\n\n## Introduction\n\n[**Solid Wrap Balancer**](https://solid-wrap-balancer.vercel.app) is a simple Solid Component that makes your titles more readable in different viewport sizes. It improves the wrapping to avoid situations like a single word in the last line, makes the content more “balanced”:\n\n![Demo](/demo.gif)\n\n## Usage\n\nTo start using the library, install it to your project:\n\n```bash\nnpm i solid-wrap-balancer\n# or\nyarn add solid-wrap-balancer\n# or\npnpm add solid-wrap-balancer\n```\n\nAnd wrap text content with it:\n\n```jsx\nimport { Balancer } from \"solid-wrap-balancer\";\n\n// ...\n\nfunction Title() {\n  return (\n    \u003ch1\u003e\n      \u003cBalancer\u003eMy Awesome Title\u003c/Balancer\u003e\n    \u003c/h1\u003e\n  );\n}\n```\n\nIf you have multiple `\u003cBalancer\u003e` components used, it’s recommended (but optional) to also use\n`\u003cBalancerProvider\u003e` to wrap the entire app. This will make them share the re-balance logic and reduce the HTML size:\n\n```jsx\nimport { BalancerProvider } from \"react-wrap-balancer\";\n\n// ...\n\nfunction App() {\n  return (\n    \u003cBalancerProvider\u003e\n      \u003cMyApp /\u003e\n    \u003c/BalancerProvider\u003e\n  );\n}\n```\n\nFor full documentation and use cases, please visit [**solid-wrap-balancer.vercel.app**](https://solid-wrap-balancer.vercel.app).\n\n## About\n\nThis project is a port of [react-wrap-balancer](https://github.com/shuding/react-wrap-balancer) made by [Shu Ding](https://twitter.com/shuding_) to solid.js\n\n## Flow\n\nIf there is a context - it initialize it with realyout function. The Rebalancer init script for each element, but if it has a context - it uses its existing relayout function from the global window context. In SSR it inject hte ratio prop to the element. When the component load it search for the script and call it with the component id. The script is a resizable observer that try to rebalance text according to ratio. If Decrease it's with to see if the height changes and go to the smallest width that the height keep the same. When unmount / ratio changes - clean observer and element function.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnirtamir2%2Fsolid-wrap-balancer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnirtamir2%2Fsolid-wrap-balancer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnirtamir2%2Fsolid-wrap-balancer/lists"}