Split Screen

Configured in Split Screen with drag-and-drop splitting, center tab alignment, and title/guide/More UI customization.

Default SplitScreen

FlexLayoutSplitScreenManages before/center/after areas in the store based on the central component. When a DragBox is dropped on this screen, a row or column split is created depending on the position, and screens that enter the same center are managed like tabs.

tsx

navigationTitle and title rendering

navigationTitleis the label data of the screen, navigationTitleComponentis a common wrapper used when the Split Screen renders each label as an actual title UI. The DragBox only passes the navigationTitle string and does not carry the navigationTitleComponent.

Uses the design of the arrived Split Screen.

When moving the screen to another Split Screen, the title label data is retained, but the rendering design follows the navigationTitleComponent of the arrived Split Screen.

tsx

Split guidance and More UI customization

titleWrapperComponent

A common wrapper that wraps both navigationTitleComponent and titleCloseButtonComponent. If omitted, no separate DOM wrapper will be created.

titleCloseButtonComponent

Replaces the close UI of the center tab. If undefined, the default X button is used, and if null, the close button is hidden.

dropGuideComponent

Replaces the default guidance UI displayed when dragged to a splittable area. If omitted, the default guidance text is used.

titleMoreButtonComponent

Only replaces the trigger ... to the right of the title. If undefined, the default button is used, and if null, More is hidden.

renderTitleMoreMenuItems

Maintains the default More menu while adding user menu items below.

renderTitleMoreMenu

Replaces all default menu content. The library continues to handle portal, position calculation, outside click, and Escape close.

tsx

Default More menu and extended context

The default More menu provides options to close the current tab, close all other tabs, close all tabs to the right, close all tabs of the current split, and open in a new window if openUrl is present.

identity

rootName, layoutName, containerName, screenKey

active tab

activeItem, activeIndex

tabs

items

actions

closeMenu(), closeCurrentTab(), closeOtherTabs(), closeTabsToRight(), closeAllTabs(), openInNewWindow()

availability

canCloseOtherTabs, canCloseTabsToRight, canOpenInNewWindow

The menu is rendered as a React Portal on document.body. It is positioned within the viewport based on the actual size of the trigger and menu, and recalculates the position on scroll/resize, so it does not get cut off by overflow inside the Split Screen.

Change order of center tab titles

You can drag the center tab titles of the same Split Screen to change their order. Placing it on the left half of the target title moves it forward, while placing it on the right half moves it backward, and the active tab is maintained based on screenKey.

Title reorder and screen split have separate drop areas.

Since only tab alignment is handled in the title area, split guidance is not displayed. If you drag a title out to the actual Split Screen area, you can still use the existing screen split drag action.

Cancel drag with Escape

If you press Escape while dragging the DragBox, it cleans up the current drag clone and pending drag state, propagating isDragging false / isDrop false. The split guidance UI disappears immediately, and no drop occurs even after mouse/touch ends.

Drop screens by URL in Next.js

v1.0.0 Next.js entry

FlexLayoutSplitScreen itself manages the split screen as is. To server-render page.tsx in Next.js using only the URL, use the DragBox from @byeolnaerim/flex-layout/next and the generated FlexLayoutNextSplitScreen.

tsx

state lifecycle options

preserveStateOnUnmount

true면 FlexLayoutSplitScreen이 언마운트되어도 현재 JavaScript runtime의 in-memory split store를 유지합니다. 브라우저 새로고침 persistence와는 별개이며 기본값은 false입니다.

screenKey

split screen 내 화면을 식별하는 key입니다. 생략하면 내부에서 생성됩니다.

Deprecated lifecycle props.

isResetOnChildrenChange is no longer used in runtime behavior and is planned for removal. isRemoveStoreOnUnmount has also been replaced with preserveStateOnUnmount, and only the deprecated alias for compatibility remains.

Refresh and browser URL restoration.

Next.js URL pane persistence.

To restore the split state up to a browser refresh, specify persistence in the generated FlexLayoutNextSplitScreen. It stores only the metadata of the Next URL pane that can be recreated, not the ReactElement.

tsx