Overview
Resizable split panels + Drag & Drop dynamic splits for React
@byeolnaerim/flex-layoutis a React component for quickly setting up resizable split panel UIs and Drag & Drop based dynamic splits.
For example, when there is a requirement to set up the screen with a product list view on the left and a real-wear preview view on the right, and each view needs to be resizable, this library can provide a good solution.
Origin story
The first @byeolnaerim/flex-layoutwas born when I was a second-year developer trying to create a business messenger based on vanilla js as a personal project.
I wanted it to resize between components like Slack or VSCode. I thought the left view configuration of VSCode looked great, so I wanted what I created to work similarly to VSCode.
Over time, when I first started with React, I recreated this as a component based on TypeScript, rxjs, and React. I expanded the existing legacy split view functionality that was resizable by drag to include dynamic split views with Drag & Drop, adhering to my past philosophy of wanting it to work almost like VSCode.
Grow Normalization
@byeolnaerim/flex-layoutWhen I first created it, I understood flex-grow as the upper limit of the total grow based on the parent layout.FlexLayout The number of child containers was understood as the upper limit of the total grow.FlexLayoutContainer I thought it should be normalized within that to distribute the ratios of each container. (This was a misinterpretation.)maxGrowNormalize the ratio of each container within it.normalizeI understood it as a concept that needs to be distributed. (This was a misinterpretation.)
For example, if there are 2 child containers, max grow is 2, and if the ratio is 30% / 70%, the actual grow should be 0.668 / 1.332. Based on that assumption, the correction logic has built up to what it is now.@byeolnaerim/flex-layoutThis has become.