https://github.com/nirtamir2/solid-wrap-balancer
Simple Solid Component That Makes Titles More Readable. Port of react-wrap-balancer to Solid.js
https://github.com/nirtamir2/solid-wrap-balancer
readable solid-start solidjs text wrap-balancer
Last synced: 3 months ago
JSON representation
Simple Solid Component That Makes Titles More Readable. Port of react-wrap-balancer to Solid.js
- Host: GitHub
- URL: https://github.com/nirtamir2/solid-wrap-balancer
- Owner: nirtamir2
- License: mit
- Created: 2023-01-06T13:52:04.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-19T07:31:28.000Z (over 2 years ago)
- Last Synced: 2025-01-24T20:38:18.524Z (about 1 year ago)
- Topics: readable, solid-start, solidjs, text, wrap-balancer
- Language: TypeScript
- Homepage: https://solid-wrap-balancer.vercel.app
- Size: 3.62 MB
- Stars: 23
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# solid-wrap-balancer
[](https://pnpm.io/)
[](https://badge.fury.io/js/solid-wrap-balancer)
This 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
Simple Solid.js Component That Makes Titles More Readable
## Introduction
[**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”:
## Usage
To start using the library, install it to your project:
```bash
npm i solid-wrap-balancer
# or
yarn add solid-wrap-balancer
# or
pnpm add solid-wrap-balancer
```
And wrap text content with it:
```jsx
import { Balancer } from "solid-wrap-balancer";
// ...
function Title() {
return (
My Awesome Title
);
}
```
If you have multiple `` components used, it’s recommended (but optional) to also use
`` to wrap the entire app. This will make them share the re-balance logic and reduce the HTML size:
```jsx
import { BalancerProvider } from "react-wrap-balancer";
// ...
function App() {
return (
);
}
```
For full documentation and use cases, please visit [**solid-wrap-balancer.vercel.app**](https://solid-wrap-balancer.vercel.app).
## About
This 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
## 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.