# Re-Flex gives React applications panes a user can drag apart
> Re-Flex, published as react-reflex, is a React component library for resizable flex layouts, with a container, an element and a splitter, and a constraints solver that distributes sizes when the panes do not add up. It suits dashboard style applications where panels must stay within minimum and maximum sizes, and it depends on you importing its stylesheet separately.
**leefsmp/Re-Flex** — Resizable Flex layout container components for advanced React web applications
- Repository: https://github.com/leefsmp/Re-Flex
- Website: https://leefsmp.github.io/Re-Flex/index.html
- Stars: 663 · Forks: 73
- Language: JavaScript
- License: MIT
- Published: 2026-10-21 · Updated: 2026-10-21 · Language: en
- Canonical page: https://hysenlabs.com/projects/leefsmp-re-flex
## Three components, and the splitter is what makes it a layout
The library is small enough to describe in one sentence. You have a ReflexContainer that establishes the layout and its orientation, ReflexElement instances that hold the panes, and ReflexSplitter instances placed between them. Dragging a splitter resizes the elements on either side of it. The basic demo in the documentation is a vertical container with two elements and a splitter between them, and the import names make the relationship plain. The author describes the motivation as personal, saying the library was created because none of the components he found satisfied his requirements, and that it addresses in a simple way the needs of advanced React web applications that require resizable layouts. The audience is therefore application developers with a specific shape in mind, a multi-pane interface where the user rearranges the proportions, rather than a general purpose layout toolkit trying to cover grid, masonry and everything else.
## The container solves for initial sizes when the panes do not add up
The mechanism that separates this from a hand written flex layout is the constraints solver on the container. The maxRecDepth prop is described as the maximum recursion depth to solve initial flex of layout elements based on user provided values, and the documentation is explicit about why it exists, since it prevents infinite recursion in case the constraints solver cannot find suitable dimensions on the elements to satisfy the initial inputs. That is an honest description of a hard problem. When a container holds a pane with a fixed size, another with a minSize and a maxSize, and a third that should take the remainder, the browser's own flex distribution cannot express that, so the library computes an initial flex for each element and hands that to flexbox. The depth limit of 100 is a safety valve rather than a tuning knob, and it is worth knowing about because a layout with many constrained panes is exactly the case where the solver has the most work to do.
## minSize and maxSize are the props you will actually use
Each element carries a small set of props, and two of them do the real work. minSize creates a constraint on the minimum size in pixels to which the element can be resized by the user, and it defaults to 1, so by default a pane can be dragged almost to nothing. maxSize creates the equivalent upper constraint and defaults to undefined, meaning unconstrained. The flex prop sets the initial flex of an element, and the documentation notes that by default all elements are evenly displayed unless some of them have minSize, maxSize or size specified. The size prop sets the size in pixels of an element, and the documentation gives its main use case as allowing programmatic animation of an element, shrinking or expanding it, with a link to a controlled elements demo. The direction prop controls which way the element shrinks or expands when size is modified, taking -1, 1 or both, and defaults to 1. So the model is coherent: flex decides the starting split, minSize and maxSize bound the user, size overrides both for programmatic control.
## propagateDimensions lets children know how big they are
The dimension propagation feature is the one that solves a problem CSS alone cannot. Setting propagateDimensions to true on an element propagates a dimensions object with height and width to its children, so a chart or a virtualised list inside a pane can size itself to the pane rather than to the viewport. The companion prop propagateDimensionsRate defines the rate in times per second at which the dimensions are updated on the child elements while resizing, and the documentation explains the intent, saying it can help performance on heavy components by skipping some rerender steps during a resize. The default of 100 times per second is effectively every frame. Two more flags control what is forwarded: resizeHeight and resizeWidth decide whether height and width are propagated when propagation is on, and both default to true. The trade is straightforward, since a pane that changes size every frame will re-render its children at that rate unless you throttle it.
## Resizing fires three events, and propagation across splitters is opt-in
The event surface is three callbacks on both the element and the splitter. onStartResize fires when the user initiates resizing, onResize fires at each resize step, and onStopResize fires when the user finishes, and each receives an object with domElement and component. The splitter has one extra prop, propagate, which propagates the drag when resizing a layout across multiple splitters, and the documentation notes that the layout must have at least three elements and therefore two splitters for the property to be relevant. That is a sensible guard, since a two-pane layout has nothing to propagate to. The three-event design also means you can do cheap work on start, expensive work on stop, and nothing in between, which is the usual reason to split a resize event this way rather than firing one continuous callback.
## Installation is one npm command and one stylesheet import
The package is published as react-reflex, and the installation instruction is a single command.
```sh
npm install react-reflex
```
The one thing that surprises people is the stylesheet, which has to be imported separately and the documentation suggests you do it once during the bootstrapping phase of the application.
```js
// You will need to import the styles separately
// You probably want to do this just once during the bootstrapping phase of your application.
import 'react-reflex/styles.css'
// then you can import the components
import {
ReflexContainer,
ReflexSplitter,
ReflexElement
} from 'react-reflex'
```
If you are not using a bundler that handles CSS imports, the UMD build is available with a stylesheet link and a script tag, pointing at the distribution file.
```html
```
The package metadata lists three entry points, a CommonJS main at dist/react-reflex.cjs, an ES module at dist/react-reflex.js and the type declarations at dist/index.d.ts, and the build scripts produce the library, the demo site and the copied stylesheet as separate steps.
## TypeScript output and the React version question
Two claims in the documentation deserve a careful reading. The first is that Re-Flex is written in TypeScript, in the src/libts directory, and that it ships accurate, auto-generated type declarations with every published version, so no separate @types package is needed. The build configuration backs that up, since the type declarations are produced by a plugin in the build pipeline and the package points its types field at the generated declaration file. The second is the React requirement, and here the two sources disagree. The React Support section states React 19 or above, while the package metadata lists peer dependencies of react and react-dom at 16.8.0 or newer. Both statements come from the repository, and the difference is the kind of thing to test against your own project rather than assume. The browser support is stated as modern evergreen browsers, Chrome, Firefox, Safari and Edge, with Internet Explorer explicitly not supported, and the library is described as responsive and mobile friendly.
## Where a resizable flex layout is the wrong answer
The first wrong answer is a layout that does not need to be resizable. A dashboard with a fixed sidebar and a scrolling content area, or anything you could express with a CSS grid template, gets a splitter and a constraints solver it never needed, and the solver is where the edge cases live. The second wrong answer is a design that expects the panes to be laid out in a way a flexbox row cannot express, since the library's own model is a linear sequence of elements and splitters in one orientation, and nesting containers is the only way to build anything more elaborate. The third is a project that cannot tolerate a separate CSS file, because the styles are not bundled and injected for you, and a build setup that hashes or extracts CSS differently will need work to accommodate it. The fourth is a team that expects a layout library to carry a design system. This one is a layout mechanism with a splitter, and the appearance of the splitter and the panes is entirely yours to style.
## Conclusion
Teams building a dashboard, IDE-like interface or admin console in React, where panels have to be draggable and bounded by minimum and maximum sizes, are the people Re-Flex is for, and the fact that it ships as three components with a documented prop surface and no runtime dependencies makes it a light addition to a bundle. It is the wrong choice for a layout that a plain CSS grid can express, because adding a drag interaction and a size solver is a real cost when the design does not need it, and it is the wrong choice if you cannot take on a separate stylesheet import. Check three things before adopting it: which React version you are on, because the documentation states React 19 and above while the package metadata declares peer dependencies of React 16.8.0 or newer, that your build resolves the ES6, CommonJS or UMD distribution the way you expect, and that the size of the panes you are designing does not depend on the constraints solver producing a particular answer, since that solver runs on a depth limit of 100. The licence is MIT, the package version is 6.0.2, the repository has no GitHub releases, and the last push was on 2026-07-30.
## FAQ
### How do I install react-reflex?
Run npm install react-reflex, then import the components from react-reflex. The stylesheet has to be imported separately, with import 'react-reflex/styles.css', and the documentation suggests doing that once during the bootstrapping phase of the application.
### Which components does Re-Flex provide?
Three: ReflexContainer, which sets the layout and its orientation, ReflexElement, which holds a pane, and ReflexSplitter, the draggable handle placed between elements. The library also ships ES6, CommonJS and UMD builds with each distribution.
### How do I stop a pane from being dragged too small?
Set minSize on the ReflexElement, which creates a constraint on the minimum size in pixels the user can resize it to, and add maxSize for the upper bound. The flex prop sets the initial distribution, which is even by default unless minSize, maxSize or size is given.
### Does Re-Flex need a separate TypeScript types package?
No. The documentation says the library is written in TypeScript and ships accurate, auto-generated type declarations with every published version, so no separate @types package is needed.
### What does propagateDimensions do?
Setting it to true on a ReflexElement propagates a dimensions object with height and width to its children, so content inside a pane can size itself to the pane. propagateDimensionsRate controls how many times per second those dimensions are updated while resizing, and defaults to 100.
## Sources
- [Issues](https://github.com/leefsmp/Re-Flex/issues)
- [leefsmp/Re-Flex on GitHub](https://github.com/leefsmp/Re-Flex)
- [License: MIT](https://github.com/leefsmp/Re-Flex/blob/master/LICENSE)
- [Project website](https://leefsmp.github.io/Re-Flex/index.html)
- [README](https://github.com/leefsmp/Re-Flex/blob/master/README.md)
---
Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/leefsmp-re-flex