A splitter for React components that leverages CSS grid templates for simple and consistent resizing.
A resizable splitter for React that leverages CSS display:grid
``
npm install --save @geoffcox/react-splitterUsage
To create vertical or horizontal splits you only need the Split component.
` To support double-clicking to reset back to the initial size, add the The callback receives the const onMeasuredSizesChanged = (sizes: SplitMeasuredPixelSizes) => { If you are using a style framework like Fluent, Material UI, or Bootstrap then your root div will likely have CSS styles applied that help this splitter work correctly. Here are some recommended CSS properties for your top-level divs if you are building a single-page application. In this case #app is the mounting point for React.Render. You can see this approach used in the demo application. body, #app {tsx
This is the left pane.
This is the right pane.
`Horizontal Split
Add the attribute to split top/bottom.`tsx
This is the top pane.
This is the bottom pane.
`Set the initial split size
Add the property to control where the initial split occurs.`tsx
Primary pane
Secondary pane
` property.`tsx
Primary pane
Secondary pane
`Nest Splits
Just nest Split componets to create whatever layout you like.
Here is an example of a common layout for a main, detail, and output view.tsx`
This is the left pane.
This is the right-top pane.
This is the right-bottom pane.
Constrain minimum pane sizes
You can prevent either pane from becoming too small using the and minSecondarySize properties.`
For vertical splits, primary is the left pane and secondary is the right pane.
For horizontal splits, primary is the top pane and secondary is the bottom pane.tsx
This pane won't get smaller than 250 pixels.
This pane won't get any smaller than 15% of the overall size of the split control./
`Customize the splitter size
You can set the size of the hit area (where the user can click to start draggin the splitter) with the property.`tsx
Primary pane
Secondary pane
`Customize the splitter colors
You can change the colors of the default splitter with the property.`tsx
const colors = {
color: 'red',
hover: '#00FF00',
drag: 'blue'
};
Primary pane
Secondary pane
`Custom render the splitter
You can render your own splitter by passing a callback to the property.`tsx
const renderSplitter = (props: RenderSplitterProps) => {
return Your splitter code goes here.
};
Primary pane
Secondary pane
` to let you know the current size of the splitter, if the split is horizontal, and if the splitter is currently being dragged.`ts`
export type RenderSplitterProps = {
pixelSize: number;
horizontal: boolean;
dragging: boolean;
};Monitor changes
You can use event callbacks to monitor changes to the primary size and the measured sizes. The primary size is a CSS unit string (percentage or initial size). The measured sizes are pixels sizes.tsxThe split is: ${primarySize}
const onSplitChanged = (primarySize: string) => {
console.log();The primary pane is: ${sizes.primary}px
};
console.log();The splitter is: ${sizes.splitter}px
console.log();The secondary pane is: ${sizes.secondary}px
console.log();
};
Primary pane
Secondary pane
`Integrating into a web application
If you have no root stylesheet, you might have problems with vertical scrolling.css``
body {
height: 100vh;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
padding: 0;
margin: 0;
}
div {
box-sizing: border-box;
}
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
outline: none;
overflow: hidden;
}