@fooyun/split-layout
v0.2.0
Published
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.
Downloads
24
Readme
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
usage
import { useContext, useState } from 'react';
import { Layout, PaneContext } from '@fooyun/split-layout';
const Counter = () => {
const [counter, setCounter] = useState(0);
return (
<div>
<span>current is: {counter}</span>
<span
style={{ color: 'green', marginLeft: '20px', cursor: 'pointer' }}
onClick={() => setCounter((c) => c + 1)}
>
add
</span>
</div>
);
};
const SplitCounter = () => {
const paneContext = useContext(PaneContext);
const splitVertical = () => {
paneContext?.splitVertical(<SplitCounter />);
};
const splitHorizontal = () => {
paneContext?.splitHorizontal(<SplitCounter />);
};
const removePane = () => {
paneContext?.removePane();
};
const operateStyle = {
textAlign: 'right',
marginBottom: '20px',
};
const operateBtnStyle = {
marginLeft: '10px',
color: '#08f',
cursor: 'pointer',
};
return (
<div>
<div style={operateStyle}>
<span style={operateBtnStyle} onClick={splitVertical}>vertical</span>
<span style={operateBtnStyle} onClick={splitHorizontal}>horizontal</span>
{paneContext?.canClose && <span style={operateBtnStyle} onClick={removePane}>close</span>}
</div>
<div>
<Counter />
</div>
</div>
);
}
export default () => {
return (
<div style={{width: '100%', height: 300, border: 'solid 1px red'}}>
<Layout>
<SplitCounter />
<SplitCounter />
</Layout>
</div>
);
}