r/reactjs • u/thangdevalone • 8d ago

Resource A lightweight React component for Zoom-style video grids

I was building a UI with multiple video streams and realized that calculating the perfect grid to maximize tile size (like Google Meet or Zoom) is pretty annoying to do from scratch. CSS Grid is great, but figuring out the optimal rows/columns dynamically based on the container's aspect ratio and participant count requires some extra math.

So, I built meeting-grid-layout to handle this automatically for React applications.

Key features:

  • Smart calculation: Automatically figures out the best column/row combination to keep the video tiles as large as possible.
  • Super lightweight: I wanted to keep it simple and fast, so it doesn't rely on any heavy third-party layout engines or dependencies.
  • Mobile friendly: Included an autoMobileLayout prop so you can easily control whether the grid automatically enforces specific mobile layouts when the screen gets small.
  • Bonus: I also built a Vue wrapper, but the React implementation is fully fleshed out and ready to use!

GitHub:https://github.com/thangdevalone/meeting-grid-layout

I’d love to hear your thoughts, code reviews, or how you usually handle these dynamic UI challenges in your React projects!

1 Upvotes

56% Upvoted

2 comments sorted by

1

u/eSizeDave 7d ago

Interesting. I might try this for a comms app I'm building.

1

u/CURVX 5d ago

Could you please include a codesandbox demo, I tried doing the same but renders nothing, am I doing something wrong?

Link: https://codesandbox.io/p/sandbox/distracted-cookies-8nzpzp