I went through a load of splitter bar implementations for use within a React site, i.e. I simply wanted to partition my application into two halves (top and bottom), with a horizontal splitter bar.
The top half should be filled with a grid of data (I was using ag-grid), the bottom half filled with the query builder control. Also the button half should be capable of being collapse/hidden.
I was surprised at how hard it was to find anything that “just worked”. But this one did…
Run
1 | yarn add m-react-splitters |
Mine is “m-react-splitters”: “^1.2.0”. Now import the following
1 2 | import Splitter from "m-react-splitters";import "m-react-splitters/lib/splitters.css"; |
and here’s the basics for the code (obviously replacing the comment blocks with your components).
1 2 3 4 5 6 7 8 9 | <Splitter position="horizontal" maximizedPrimaryPane={!showQueryBuilder}><div style={{width: "100%, height: "100%" }}><!-- grid --></div><div style={{width: "100%, height: "100%", overflow: "auto" }}><!-- query builder --></div> |