@devteks/react-split-view

React SplitView

A React component that imitates VS Code SplitView. As far as I know, the SplitView function is available, if not, please submit an Issue.

Github Pages Demo

Chromatic Demo

✨ Characteristic

• 🌈 VSCode similar SplitView function
• 📦 Support priority, when the parent container changes size or drags Sash, the one with higher priority will be resized first
• 🛡 Support minimum size and maximum size constraints
• ⚙️ Support docking
• 🌍 Support fixed Pane
• 🎨 Support for chain reactions
• ⛪ Support Hover Delay
• 🎷 Support for layout storage
• 📚 Nested layouts are supported

---

🖥 Environment

• Modern browsers and Internet Explorer 11 (with polyfills)
• Server-side Rendering
• Electron

---

IE, Edge	Firefox	Chrome	Safari	Electron
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

---

📦 Install

npm install @devteks/react-split-view

yarn add @devteks/react-split-view

---

🔨 Use

import { useState, useEffect } from 'react';
import {
  SplitView,
  SplitViewPane,
  SplitViewPaneInfo,
} from '@devteks/react-split-view';

const STORE_KEY = 'LAYOUT';

const save = (data: SplitViewPaneInfo[]) => localStorage.setItem(STORE_KEY, JSON.stringify(data));

const load = (): SplitViewPaneInfo[] | undefined => {
  const text = localStorage.getItem(STORE_KEY);
  return !text ? undefined : JSON.parse(text);
};

const initialData: SplitViewPaneInfo[] = [
  {
    paneKey: 'Pane1',
    minSize: 44,
    maxSize: 44,
  },
  {
    paneKey: 'Pane2',
    minSize: 120,
    maxSize: 240,
    size: 180,
    snapable: true,
  },
  {
    paneKey: 'Pane3',
    minSize: 160,
  },
  {
    paneKey: 'Pane4',
    minSize: 120,
    maxSize: 240,
  },
];

const Example = () => {
  const [paneData, setPaneData] = useState<SplitViewPaneInfo[]>(() => load() ?? initialData);

  useEffect(() => {
    save(paneData);
  }, [paneData]);

  return (
    <div style={{ height: 800, width: '100%' }}>
      <SplitView
        paneData={paneData}
        onChange={changes => setPaneData([ ...changes ])}
      >
        <SplitViewPane paneKey="Pane1">fixed</SplitViewPane>
        <SplitViewPane paneKey="Pane2">Snapable</SplitViewPane>
        <SplitViewPane paneKey="Pane3">Content</SplitViewPane>
        <SplitViewPane paneKey="Pane4">Property</SplitViewPane>
      </SplitView>
    </div>
  );
};

---

API

SplitView

Property	Description	Type	Default Value
paneData	Pane configuration data.	`SplitViewPaneInfo[]`	-
layout	Layout direction; horizontal: Pane is arranged horizontally vertical: Pane is arranged vertically.	`horizontal | vectical`	`horizontal`
sashSize	The width of the dividing line between the two Panes (height when layout=horizontal)	`number`	5
hoverDelay	Mouse Hover delay. 0 does not delay.	`number`	300
onChange	Triggered when the layout changes after dragging Sash due to container size changes. If you need to save the layout, you can save the paneData parameter and pass it to the SplitView.paneData property when you need to load the layout.	`(paneData:SplitViewPaneInfo[])=>void`	-

SplitViewPane

Property	Description	Type	Default Value
paneKey	The unique Key of the Pane, which corresponds to the paneKey in SplitViewPaneInfo. Use paneKey to practice the relationship between SplitViewPane component and paneData.	`string`	-

SplitViewPaneInfo

Property	Description	Type	Default Value
paneKey	The unique Key of the Pane, corresponding to SplitViewPane.paneKey. Use paneKey to practice the relationship between SplitViewPane component and paneData.	`string`	-
minSize	Smallest size.	`number`	-
size	Current size. The real-time size will be calculated based on the container size, priority, etc.	`number`	-
maxSize	Biggest size. biggest size. If all maxSize values ​​in SplitView.paneData are set, then the maxSize of the last Pane is invalid.	`number`	-
snapable	Is it possible to dock. The snapped attribute is only valid when true.	`boolean`	false
snapped	Is it docked. Only valid if snapable is true.	`boolean`	-
snappedSize	Docked size.	`boolean`	-
priority	Panes with higher values ​​are resized first.	`number`	0

---

Global Method

It is used to support the movement of Pane in the same SplitView or between different SplitViews. If you need to implement operations such as Pane's moving, dragging and dropping, layout configuration, etc., these methods can help you.

paneMoveTo: Move the Pane corresponding to paneKey to the specified position.

Parameter	Description	Type	Default Value
paneData	Pane data.	`SplitViewPaneInfo[]`	-
sourcePaneKey	The paneKey of the Pane to move.	`string`	-
destinationPaneKey	The paneKey to move to.	`string`	-
behand	Whether it is behind the target Pane.	`boolean`	false

paneMoveToLast: Move the Pane corresponding to paneKey to the last position.

Parameter	Description	Type	Default Value
paneData	Pane data.	`SplitViewPaneInfo[]`	-
sourcePaneKey	The paneKey of the Pane to move.	`string`	-

paneMoveToFirst: Move the Pane corresponding to paneKey to the front position.

Parameter	Description	Type	Default Value
paneData	Pane data.	`SplitViewPaneInfo[]`	-
sourcePaneKey	The paneKey of the Pane to move.	`string`	-

paneCut: Cut the Pane corresponding to paneKey. Remove the Pane with the specified paneKay from paneData and return this Pane.

Parameter	Description	Type	Default Value
paneData	Pane data.	`SplitViewPaneInfo[]`	-
sourcePaneKey	The paneKey of the Pane to cut.	`string`	-

Return value: Pane data corresponding to sourcePaneKey.

panePaste: Paste the Pane corresponding to the paneKey to the specified position, and support cutting and pasting between paneData of different SplitViews.

Parameter	Description	Type	Default Value
srcPane	The Pane data to paste. It can be derived from the return value of cutPane, or it can be a new Pane data.	`SplitViewPaneInfo`	-
destPaneData	paneData to paste into	`SplitViewPaneInfo[]`	-
paneKey	Destination paneKey to paste into.	`string`	-
behand	Whether it is behind the target Pane.	`boolean`	false

If you want to move the Pane across the SplitView, remember that the SplitView should contain the SplitViewPane component corresponding to the paneKey.