The most basic example with two fixed panes vertically arranged. By default each ReflexElement will be equally arranged within its ReflexContainer. To specify a custom arrangement, you can use flex={number in [0.0, 1.0]} property.

  Basic example with two resizable panes vertically arranged: placing a ReflexSplitter draggable component between two ReflexElements will allow those elements to be manually resized by user.

  Example with two splitters propagating the drag: this is where Re-Flex really makes the difference between any other layout library you can find out there.

  Setting the propagate={true} property on the ReflexSplitter components will propagate the drag all the way from right to left or left to right (respectively up and down for an horizontal layout) depending on user interaction. In that demo minSize and maxSize properties are also specified on the middle pane, Re-Flex will respect those attributes when dragging and propagating the offset applied by user.

  Example with three splitters propagating the drag, same as example above but one more splitter just for fun ...

  A more advanced example with multi-nested resizable layouts using events: while dragging a splitter the affected panes will get a different background color, illustrating how you can use Re-Flex events to perform some additional custom logic.

  A more verbose example that illustrates how to programmatically control the size of ReflexElements.

  Clicking the (- / +) buttons in the control bar above each pane will respectively minimize or maximize that pane into the allocated layout space.

  Clicking the (=) button will lock the pane to its current size. Click the button again to unlock it.

  This demo illustrates how to enable ReflexElement children to be "size-aware". Under the hoods, Re-Flex is using react-measure to inject a dimensions property to its child elements.

  To activate that feature, you need to use use propagateDimensions={true} and also renderOnResize={true} in order to force the child elelement to re-render when its size has been modified. Because re-rendering a component at each resizing step can be costly, you can specify the rendering rate using renderOnResizeRate, which is set to a default value of 60 ms.

  This demo illustrates how to use onResize event on ReflexElement to create a persistent layout state: Everytime a pane is being resized, we store the current layout state to the localStorage and restore it when the component gets created. Reload the page to see the layout will appear in the same state as you left it.

  This demo illustrates how to create collapsible panels with Re-Flex: the side panels will collapse when their size becomes smaller than the defined threshold.

  This demo illustrates how to use a ReflexHandle: when inserted as child of a ReflexElement, a ReflexHandle allows user to resize the element as if the splitter was manipulated. It needs to be inserted as child of an element following a splitter.