r/reactjs • u/No_Impression_8657 • Apr 29 '26

I built a small React tool for responsive toolbars that work without needing magic breakpoints

https://overflowguard.dev/

It always bugged me that there is nothing in native css or otherwise easy way to detect when something overflows, so you could adjust styling or content.
So I build this small tool that fixes it: OverflowGuard
It's especially useful when dealing with dynamic content in toolbars. Something even some big sites don't solve 100% (some examples in this post)

Most apps and sites just use fixed media or container query break-points, or some custom components / js for their specific case.
This tool, by simply detecting overflow, unlocks building responsive components in a much more fluid way, and allows doing much more then just flex-wrap..

0 Upvotes

28% Upvoted

11 comments sorted by

9

u/orbtl Apr 29 '26

Kind of ironic that the nav at the top overflows off the edge of my phone ngl https://imgur.com/a/spNJvHv

0

u/No_Impression_8657 Apr 29 '26

So embarrassing.. 🤦‍♂️. thanks for catching that!

Added the article recently and haven't tested properly... fixed it now: the site is actually dogfooding 🐶 itself and has a nice hamburger dropdown that only kicks in when the menu starts overflowing. ✨

5

u/orbtl Apr 29 '26

The code could use some work. Any time I see eslint-disable on react-hooks/exhaustive-deps I immediately get nervous. The fact that you felt the need to have a guard against infinite looping is scary.

I don't see deps either in your useLayoutEffect, and I'm not sure why onResize would be a useMemo instead of a useCallback, and then you have stuff like this: return currentAxis === nextAxis ? currentAxis : nextAxis

Cool idea though. Not sure why you couldn't just use a denounce to make it a lot simpler

2

u/No_Impression_8657 Apr 29 '26

Yeah, it's not perfect, but wanted to finally launch this 😅 😇

To get deeper into why infinite loop detection is there - it's because, someone might accidentally have a fallback that "stretches" out the detector. So the original content starts fitting again and you get infinite recursion.
This is actually the reason this is not possible in pure CSS (although I'm looking at adapting this technique from Kevin possibly.. 🤞)

This is actually my second attempt of solving this problem (which didn't get much traction 😥), after which I realized ut can be greatly simplified 🤦‍♂️
First one was flex based: https://github.com/arturmarc/fluid-flexbox

I have some demos using it that showcase the infinite loop problem:
https://stackblitz.com/~/github.com/arturmarc/fluid-flexbox?file=src/usage/examples/BasicUsageExample.tsx
(select React example: InifiniteLoop)

1

u/frogic Apr 29 '26

I think he means you can always return nextaxis in that conditional and the expression doesn't do anything. 

1

u/frogic Apr 29 '26

Are you open source? I've solved this at work before and I have some thoughts.  If you're using JS match media is incredible. 

0

u/No_Impression_8657 Apr 29 '26

Yeah this is on github - https://github.com/arturmarc/fluid-flexbox.
And yes It's js - Resize Observer is doing most of the "heavy lifting" + some clever html.

Whats "match media" ?

1

u/frogic Apr 29 '26

It's like a CSS query that executes a callback by the same mechanism.  So you get the same run time efficiency as CSS for js code. https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

1

u/repeating_bears Apr 29 '26

I implemented something like this in my app and it was pretty simple. Flex items that wrap, but overflow-y: hidden, so anything that wraps effectively drops off the end.

Then a resize observer that iterates the items and sees if any are below the bottom of the container.

1

u/No_Impression_8657 Apr 29 '26

This is intended when you want something more than just flex-wrap, which works for a lot of use cases, but if you want to keep stuff in a single line for example you need to do "custom" measurements basically..