split-layout

This component allows you to split your screen both vertically and horizontally, with infinite nesting. It also maintains the state of the already split sections.

You can resize pane, split pane in vertical and horizontal, and close pane.

demo online

demo

usage

1import { useContext, useState } from 'react';
2import { Layout, PaneContext } from '@fooyun/split-layout';
3
4const Counter = () => {
5  const [counter, setCounter] = useState(0);
6
7  return (
8    <div>
9      <span>current is: {counter}</span>
10      <span
11        style={{ color: 'green', marginLeft: '20px', cursor: 'pointer' }}
12        onClick={() => setCounter((c) => c + 1)}
13      >
14        add
15      </span>
16    </div>
17  );
18};
19
20const SplitCounter = () => {
21  const paneContext = useContext(PaneContext);
22
23  const splitVertical = () => {
24    paneContext?.splitVertical(<SplitCounter />);
25  };
26
27  const splitHorizontal = () => {
28    paneContext?.splitHorizontal(<SplitCounter />);
29  };
30
31  const removePane = () => {
32    paneContext?.removePane();
33  };
34
35  const operateStyle = {
36    textAlign: 'right',
37    marginBottom: '20px',
38  };
39
40  const operateBtnStyle = {
41    marginLeft: '10px',
42    color: '#08f',
43    cursor: 'pointer',
44  };
45
46  return (
47    <div>
48      <div style={operateStyle}>
49        <span style={operateBtnStyle} onClick={splitVertical}>vertical</span>
50        <span style={operateBtnStyle} onClick={splitHorizontal}>horizontal</span>
51        {paneContext?.canClose && <span style={operateBtnStyle} onClick={removePane}>close</span>}
52      </div>
53      <div>
54        <Counter />
55      </div>
56    </div>
57  );
58}
59
60export default () => {
61  return (
62    <div style={{width: '100%', height: 300, border: 'solid 1px red'}}>
63      <Layout>
64        <SplitCounter />
65        <SplitCounter />
66      </Layout>
67    </div>
68  );
69}