10 React UI Layout Grid Components and Libraries

1. A React virtualized, autosizing masonry component

This is image title

View Demo: https://codesandbox.io/s/0oyxozv75v

Github: https://github.com/jaredLunde/masonic

Download Link: https://github.com/jaredLunde/masonic/archive/master.zip

Tooltips

If tou want overflow: auto on containers, you must either set it globally( add overflow rule to default container class ), or individually;
React.Fragment children are not yet supported;
Resizer, which is first or last child, does nothing( see example );
Feel free to customize Resizer styling by providing your own css( use dist/resizer.style.css as an example )

2. Rendering columns from a list of children with horizontal ordering

React component for rendering columns from a list of children with horizontal ordering

This is image title

View demo: https://novascreen.github.io/react-columns/

Github: https://github.com/novascreen/react-columns

Download Link: https://github.com/novascreen/react-columns/archive/master.zip

3. A react-spring driven masonry-like grid with enter/exit and shared element transitions

This is image title

View demo: https://codesandbox.io/embed/0582jolnl

Github: https://github.com/drcmda/mauerwerk

Download Link: http://github.com/drcmda/mauerwerk/zipball/master

4. A layout manager that arranges React components in multiple tab sets

FlexLayout is a layout manager that arranges React components in multiple tab sets, these can be resized and moved.

This is image title

View demo: https://rawgit.com/caplin/FlexLayout/demos/demos/v0.30/demo/index.html

Github: http://github.com/caplin/FlexLayout

Download Source: https://github.com/caplin/FlexLayout/archive/master.zip

5. Drag & Drop Grid Layout in React

React implementation of a sortable drag and drop list organised into columns.

This is image title

View Demo: https://codepen.io/tjramage/pen/yOEbyw

6. A minimal window manager built using React

A minimal window manager built using React.

This is image title

Live Demo: https://stayradiated.github.io/reactwm/

Github: https://github.com/stayradiated/reactwm

Download Link: http://github.com/stayradiated/reactwm/zipball/master

7. A draggable and resizable grid layout with React.js

React-Grid-Layout is a grid layout system much like Packery or Gridster, for React. Unlike those systems, it is responsive and supports breakpoints. Breakpoint layouts can be provided by the user or autogenerated. RGL is React-only and does not require jQuery.

This is image title

Live Demo: https://strml.github.io/react-grid-layout/examples/0-showcase.html

Github: https://github.com/STRML/react-grid-layout

Download Link: https://github.com/STRML/react-grid-layout/archive/master.zip

8. A full-featured React Tiling Window Manager

react-mosaic is a full-featured React Tiling Window Manager meant to give a user complete control over their workspace. It provides a simple and flexible API to tile arbitrarily complex react components across a user’s view. react-mosaic is written in TypeScript and provides typings but can be used in JavaScript as well.

This is image title