solid-wrap-balancer

This project is a port of react-wrap-balancer made by Shu Ding to solid.js

Simple Solid.js Component That Makes Titles More Readable

Introduction

Solid Wrap Balancer 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”:

Usage

To start using the library, install it to your project:

npm i solid-wrap-balancer
# or
yarn add solid-wrap-balancer
# or
pnpm add solid-wrap-balancer

And wrap text content with it:

import { Balancer } from "solid-wrap-balancer";

// ...

function Title() {
  return (
    <h1>
      <Balancer>My Awesome Title</Balancer>
    </h1>
  );
}

If you have multiple <Balancer> components used, it’s recommended (but optional) to also use <BalancerProvider> to wrap the entire app. This will make them share the re-balance logic and reduce the HTML size:

import { BalancerProvider } from "react-wrap-balancer";

// ...

function App() {
  return (
    <BalancerProvider>
      <MyApp />
    </BalancerProvider>
  );
}

For full documentation and use cases, please visit solid-wrap-balancer.vercel.app.

About

This project is a port of react-wrap-balancer made by Shu Ding to solid.js

Flow

If 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.