React Component For Balanced Headlines – Wrap Balancer

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.

How to use it:

1. Installation.

# NPM
$ npm i react-wrap-balancer

2. Import the Wrap Balancer component.

import Balancer from 'react-wrap-balancer'

3. Wrap your content in the <Balancer>.

function Title() {
  return (
    <h1>
      <Balancer>My Long Title Here</Balancer>
    </h1>
  )
}

Preview:

Download Details:

Author: shuding

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/shuding/react-wrap-balancer

License: MIT