React split-pane component.
You can find examples of using the library here.
Allotment is available from npm.
Allotment has react and react-dom as peer dependencies.
yarn add react react-dom
yarn add allotment
import React from "react";
import { Allotment } from "allotment";
import "allotment/dist/style.css";
export const App = () => (
<Allotment>
<ComponentA>
<ComponentB>
</Allotment>
);
If you want more control over the behaviour of the individual panes you can use the Allotment.Pane component. This includes setting the minimum and maximum size of a pane, as well as whether to enable snapping behaviour.
<Allotment>
<Allotment.Pane minSize={200}>
<ComponentA>
</Allotment.Pane>
<Allotment.Pane snap>
<ComponentB>
</Allotment.Pane>
</Allotment>
All properties are optional.
An array of initial sizes of the panes. If the sum of the sizes differs from the size of the container then the panes' sizes will be scaled proportionally.
<Allotment defaultSizes={[100, 200]}>
<div />
<div />
</Allotment>
Infinity)Maximum size of any pane.
30)Minimum size of any pane.
true)Resize each view proportionally when resizing container.
false)Enable snap to zero for all panes.
false)Direction to split. If true then the panes will be stacked vertically, otherwise they will be stacked horizontally.
Callback that is fired when the pane sizes change (usually on drag). Recommended to add a debounce function to rate limit the callback. Passed an array of numbers.
Callback that is fired whenever the user double clicks a sash.
Callback that is fired whenever the user changes the visibility of a pane by snapping. Note that this will only be called if the new value is different from the current visible prop on the Pane.
Maximum size of this pane. Overrides maxSize set on parent component.
Minimum size of this pane. Overrides minSize set on parent component.
The priority of the pane when the layout algorithm runs. Panes with higher priority will be resized first.
Only used when proportionalLayout is false.
Preferred size of this pane. Allotment will attempt to use this size when adding this pane (including on initial mount) as well as when a user double clicks a sash, or the reset method is called on the Allotment instance.
The size can either be a number or a string. If it is a number it will be interpreted as a number of pixels. If it is a string it should end in either "px" or "%". If it ends in "px" it will be interpreted as a number of pixels, e.g. "120px". If it ends in "%" it will be interpreted as a percentage of the size of the Allotment component, e.g. "50%".
Enable snap to zero for this pane. Overrides snap set on parent component.
Whether the pane should be visible.
Allotment uses CSS variables for styling. You can customize the following default variables.
:root {
--focus-border: #007fd4;
--separator-border: #838383;
}
To control the feedback area size of the dragging area between panes you can call the exported setSashSize function with desired size in pixels. Set it to a larger value if you feel it's hard to resize the panes using the mouse. On touch devices the feedback area is always set to 20 pixels
You can use a ref to get access to the Allotment component instance and call its reset and resize methods manually:
const ref = React.useRef(ref);
return (
<div>
<button
onClick={() => {
ref.current.reset();
}}
>
Reset
</button>
<button
onClick={() => {
ref.current.resize([100, 200]);
}}
>
Resize
</button>
<Allotment ref={ref}>
<div />
<div />
</Allotment>
</div>
);
The Allotment component takes its width and height from the element which contains it. It does not come with an explicit width or height out of the box. It's easy to end up with a div of height zero by accident. For example, adding allotment to a brand new Create React App project without setting a height on a containing div won't work because the default root div itself has no height.
You should also check that the css has been imported/included, for example at the root of your application:
import "allotment/dist/style.css";
The simplest approach is to place your content inside a new div with width and height 100% and overflow auto. This div will have the same dimensions as the pane it's inside and if its content overflows the browser will provide scrolling behaviour.
If you get an error when importing allotment in a Next.js project consider not including the module server-side. Allotment currently only works in a browser. It might be possible to produce sensible results server-side in the future so create an issue requesting this if interested.
Set minSize and maxSize props to the same value.
FAQs
React split-pane component
The npm package allotment receives a total of 47,144 weekly downloads. As such, allotment popularity was classified as popular.
We found that allotment demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.