{"id":13467883,"url":"https://github.com/shuding/react-wrap-balancer","last_synced_at":"2025-05-13T20:12:59.696Z","repository":{"id":65049260,"uuid":"564209091","full_name":"shuding/react-wrap-balancer","owner":"shuding","description":"Simple React Component That Makes Titles More Readable","archived":false,"fork":false,"pushed_at":"2024-05-25T21:41:29.000Z","size":3545,"stargazers_count":4107,"open_issues_count":13,"forks_count":66,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-04-28T10:55:36.783Z","etag":null,"topics":["react","typography","wrapping"],"latest_commit_sha":null,"homepage":"https://react-wrap-balancer.vercel.app","language":"HTML","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/shuding.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2022-11-10T08:21:36.000Z","updated_at":"2025-04-25T00:02:35.000Z","dependencies_parsed_at":"2024-03-13T22:43:32.542Z","dependency_job_id":"b207a5cf-0203-40c2-8f9b-0fc13968530d","html_url":"https://github.com/shuding/react-wrap-balancer","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shuding%2Freact-wrap-balancer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shuding%2Freact-wrap-balancer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shuding%2Freact-wrap-balancer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shuding%2Freact-wrap-balancer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shuding","download_url":"https://codeload.github.com/shuding/react-wrap-balancer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254020615,"owners_count":22000755,"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","typography","wrapping"],"created_at":"2024-07-31T15:01:01.956Z","updated_at":"2025-05-13T20:12:54.687Z","avatar_url":"https://github.com/shuding.png","language":"HTML","funding_links":[],"categories":["HTML","Uncategorized"],"sub_categories":["Uncategorized"],"readme":"[![React Wrap Balancer - Simple React Component That Makes Titles More Readable](.github/card.png)](https://react-wrap-balancer.vercel.app)\n\n## Introduction\n\n[**React Wrap Balancer**](https://react-wrap-balancer.vercel.app) is a simple React Component that makes your titles more readable in different viewport sizes. It improves the wrapping to avoid situations like single word in the last line, makes the content more “balanced”:\n\n![](.github/demo.gif)\n\n## Usage\n\nTo start using the library, install it to your project:\n\n```bash\nnpm i react-wrap-balancer\n```\n\nAnd wrap text content with it:\n\n```jsx\nimport Balancer from 'react-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\n### `\u003cBalancer\u003e`\n\n`\u003cBalancer\u003e` is the main component of the library. It will automatically balance the text content inside it. It accepts the following props:\n\n- **`as`** (_optional_): The HTML tag to be used to wrap the text content. Default to `span`.\n- **`ratio`** (_optional_): The ratio of “balance-ness”, 0 \u003c= ratio \u003c= 1. Default to `1`.\n- **`preferNative`** (_optional_): An option to skip the re-balance logic and use the native CSS text-balancing if supported. Default to `true`.\n- **`nonce`** (_optional_): The [nonce](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) attribute to allowlist inline script injection by the component.\n\n### `\u003cProvider\u003e`\n\nIf you have multiple `\u003cBalancer\u003e` components used, it’s recommended (but optional) to also use\n`\u003cProvider\u003e` to wrap the entire app. This will make them share the re-balance logic and reduce the HTML size:\n\n```jsx\nimport { Provider } from 'react-wrap-balancer'\n\n// ...\n\nfunction App() {\n  return (\n    \u003cProvider\u003e\n      \u003cMyApp/\u003e\n    \u003c/Provider\u003e\n  )\n}\n```\n\nFor full documentation and use cases, please visit [**react-wrap-balancer.vercel.app**](https://react-wrap-balancer.vercel.app).\n\n## Browser Support Information\nDesktop:\n\n| Browser | Min Version |\n|:-------:|:-----------:|\n| Chrome  |     64      |\n|  Edge   |     79      |\n| Safari  |    13.1     |\n| FireFox |     69      |\n|  Opera  |     51      |\n|   IE    | No Support  |\n\nMobile:\n\n|     Browser     | Min Version |\n|:---------------:|:-----------:|\n|     Chrome      |     64      |\n|     Safari      |    13.4     |\n|     Firefox     |     69      |\n|      Opera      |     47      |\n| WebView Android |     64      |\n\nCross-browser compatibility issues are mainly due to the fact that lib uses the ResizeObserver API. More information about this API can be found at this [link](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).\n\nIf you are using a browser which version is lower than the versions in the table, please consider adding polyfill for this API or upgrade your browser.\n\n## About\n\nThis project was inspired by Adobe’s [balance-text](https://github.com/adobe/balance-text) project, NYT’s [text-balancer](https://github.com/nytimes/text-balancer) project, and Daniel Aleksandersen’s [Improving the New York Times’ line wrap balancer](https://www.ctrl.blog/entry/text-wrap-balance.html). If you want to learn more, you can also take a look at the [text-wrap: balance](https://drafts.csswg.org/css-text-4/#text-wrap) proposal.\n\nSpecial thanks to [Emil Kowalski](https://twitter.com/emilkowalski_) for testing and feedback.\n\nCreated by [Shu Ding](https://twitter.com/shuding_) in 2022, released under the MIT license.\n\n\u003ca aria-label=\"Vercel logo\" href=\"https://vercel.com\"\u003e\n  \u003cimg src=\"https://badgen.net/badge/icon/Made%20by%20Vercel?icon=zeit\u0026label\u0026color=black\u0026labelColor=black\"\u003e\n\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshuding%2Freact-wrap-balancer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshuding%2Freact-wrap-balancer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshuding%2Freact-wrap-balancer/lists"}