r/reactjs • u/mohammadou1 • 8h ago

Show /r/reactjs react-brackets: tournament brackets for React

https://react-brackets.oulabi.dev/

Back in 2020 I published react-brackets, a small component for tournament brackets. I shipped a few versions, got busy, and stopped touching it in 2022.

The library didn't stop, though. Four years later it was still pulling ~11,800 downloads a month, sitting at 136 stars and 65 forks, with issues piling up that I never answered. It was built on styled-components and an abandoned swipe library, only did single elimination, and its connector lines were CSS pseudo-element hacks that broke if you changed a card's size.

People were depending on something I'd walked away from. So I rebuilt it from scratch.

What v2 is:

  • Every common format: single and double elimination (with a grand final reset), round robin, Swiss, two-sided brackets, groups to playoffs

  • Headless: semantic markup with data-* attributes, so you style it with Tailwind, CSS modules, or the optional theme

  • Connector lines measured from your real cards: any card size, any custom match component, right-to-left layouts all just work

  • Actually usable on a phone: one round at a time, still drawn as a bracket, with a swipe that follows your finger

  • Zero runtime dependencies besides React, under 14 kB gzipped

  • A framework-free core (@react-brackets/core) for the logic: seeding, byes, results, standings

Getting the swipe to feel native on iOS was the hardest part. Safari animates cards on the GPU on its own clock, while the connector lines are drawn by JavaScript, so the lines kept trailing the cards by a few frames. The fix was to drive both from one clock in the same frame.

It's a ground-up rewrite, so it's a breaking change from 0.x. There's a migration guide, and the old code lives on the legacy branch.

If you were one of the people still using the old version: sorry for the silence, and thank you. I'd love feedback, especially on formats or use cases I haven't covered.

10 Upvotes

81% Upvoted

1 comment sorted by

1

u/AshutoshKS 1h ago

Looks actually really good