Security News
OpenJS: “XZ Utils Cyberattack Likely Not an Isolated Incident”
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.
react-wrap-balancer
Advanced tools
Weekly downloads
Readme
React Wrap Balancer 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”:
To start using the library, install it to your project:
npm i react-wrap-balancer
And wrap text content with it:
import Balancer from 'react-wrap-balancer'
// ...
function Title() {
return (
<h1>
<Balancer>My Awesome Title</Balancer>
</h1>
)
}
<Balancer>
<Balancer>
is the main component of the library. It will automatically balance the text content inside it. It accepts the following props:
as
(optional): The HTML tag to be used to wrap the text content. Default to span
.ratio
(optional): The ratio of “balance-ness”, 0 <= ratio <= 1. Default to 1
.preferNative
(optional): An option to skip the re-balance logic and use the native CSS text-balancing if supported. Default to true
.nonce
(optional): The nonce attribute to allowlist inline script injection by the component.<Provider>
If you have multiple <Balancer>
components used, it’s recommended (but optional) to also use
<Provider>
to wrap the entire app. This will make them share the re-balance logic and reduce the HTML size:
import { Provider } from 'react-wrap-balancer'
// ...
function App() {
return (
<Provider>
<MyApp/>
</Provider>
)
}
For full documentation and use cases, please visit react-wrap-balancer.vercel.app.
Desktop:
Browser | Min Version |
---|---|
Chrome | 64 |
Edge | 79 |
Safari | 13.1 |
FireFox | 69 |
Opera | 51 |
IE | No Support |
Mobile:
Browser | Min Version |
---|---|
Chrome | 64 |
Safari | 13.4 |
Firefox | 69 |
Opera | 47 |
WebView Android | 64 |
Cross-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.
If 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.
This project was inspired by Adobe’s balance-text project, NYT’s text-balancer project, and Daniel Aleksandersen’s Improving the New York Times’ line wrap balancer. If you want to learn more, you can also take a look at the text-wrap: balance proposal.
Special thanks to Emil Kowalski for testing and feedback.
Created by Shu Ding in 2022, released under the MIT license.
FAQs
Simple React component that makes titles more readable.
The npm package react-wrap-balancer receives a total of 114,198 weekly downloads. As such, react-wrap-balancer popularity was classified as popular.
We found that react-wrap-balancer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.
Company News
Come meet the Socket team at BSidesSF and RSA! We're sponsoring several fun networking events and we would love to see you there.
Security News
OSI is starting a conversation aimed at removing the excuse of the SaaS loophole for companies navigating licensing and the complexities of doing business with open source.