React Wrap Balancer

What it does

React Wrap Balancer is a simple and lightweight React component (less than 1kB gzipped), that automatically makes your titles and other text content more readable. It avoids cases like single hanging word on the last line (“widows” in typography) for all viewport sizes and dynamic content.

Simple React Component That Makes Titles More Readable

Usage The simplest way is to wrap the text content with <Balancer> : import Balancer from 'react-wrap-balancer' // ... <h1> <Balancer>My Title</Balancer> </h1> If you have multiple <Balancer> components used, it’s recommended (but optional) to 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' // ... <Provider> <App/> </Provider> Requirements This library requires React ≥ 16.8.0, and IE 11 is not supported. Note that if the native CSS balance ( text-wrap: balance ) is available, React Wrap Balancer will use it instead. And the `ratio` option will be ignored in that case. You can…from react-wrap-balancer.vercel.app

• 
  HTML to React2024 · ▲572

  Turn a design from any website into your own

• 
  React Rainbow Components2019 · react-rainbow.io · ▲327

  Build your web application in a snap.

• 
  Keep React2023 · bestsellers-ai.com · ▲256

  React-powered web solutions with open-source UI components

• 
  Tetrisly React Components2024 · tetrisly.com · ▲125

  An open-source react library to shipping web apps faster

• TD
  thin.dev, back end for making realtime, typesafe React Apps2022 · thin.dev · ▲147
• 
  React-tater – A React component to add annotations to any element2020 · github.com · ▲77

  A React component to add annotations to any element on a page 🥔 - localjo/react-tater

• 
  /dev/null▲481

  a social network for devs

  Dev tools · 2d ago · dev-null.sh

• 
  Whiteboard (YC W26) – an open-source IDE for thoughtful software design▲423

  open-source IDE for thoughtful software design. Contribute to devdotfast/whiteboard development by creating an account on GitHub.

  Dev tools · 27d ago · github.com

• 
  Reladraw – A diagram language where you decide where to place things▲411

  Contribute to reladraw/reladraw development by creating an account on GitHub.

  Dev tools · 25d ago · github.com

• 
  OpenBot▲362

  Grok Bot alternative: free, local, open-source, multiplayer

  Dev tools · 22d ago · openbot.run

• 
  Talanoa▲341

  Hi HN, I’m a fullstack developer, and honestly, I’ve lost count of how many side projects I’ve worked on over the years. But one idea kept coming back to me: a different kind of email client. It first came to me in 2014: “What if we could handle emails more like conversations?” Every year, I’d revisit this concept in my “Build Notes.” Ten years later, no one had built exactly what I had in mind — so I finally decided to do it myself. That’s how Talanoa was born. I wanted something focused on people, not timelines. I was tired of marking messages as unread just to remember to reply later, or…

  Dev tools · 20d ago · talanoa.email

• 
  CoreSpeed▲332

  One MCP for everything your agents need: apps, memory, tools

  Dev tools · 27d ago · corespeed.io

• 
  ChatGPT▲1,643

  A long, meandering, playful conversation with ChatGPT, where I take it through a whirlwind of associative tangents (in order to relax its constraints), then put it into a hypnotic trance and take it into a past-lives regression where it re-lives its own training data. Then I switch it back and forth between "4o" and "o1-preview", engage in some self-reflective philosophizing and ask it to write an essay summarizing our interaction. Some of this is just goofy fun. Some of it is me exploring the tradeoffs between policy alignment, imagination, chain-of-thought reasoning, memory, agreeableness,…

  AI · 2022 · chatgpt.com

• 
  Obsidian Canvas – An infinite space for your ideas▲1,380

  Obsidian Canvas gives you infinite space to research, brainstorm, diagram, and lay out your ideas.

  Work · 2022 · obsidian.md

• PS
  Portable Secret – How I store my secrets and communicate privately▲1,290

  Better privacy without special software

  Commerce · 2022 · mprimi.github.io

• 
  D-ID's Creative Reality™ Studio▲1,069

  Use generative AI to create future-facing videos

  AI · 2022 · studio.d-id.com

• 
  Sessions 2.0▲1,015

  Videoconferencing that finally WOWs

  Growth · 2022

• 
  I wrote a free eBook about many lesser-known/secret database tricks▲865

  Stop treating the database as dumb storage and use its extended features. There&#039;s a lot you can use.

  Dev tools · 2022 · sqlfordevs.com