repository·main·Indexed 22 days ago
https://github.com/johnwalley/allotmentA React-based split-pane component for creating customizable, resizable layouts similar to VS Code. It provides the Allotment component for the main container and Allotment.Pane for granular control over individual panes, including minimum/maximum sizes, visibility, and snapping behavior. The library supports both horizontal and vertical orientations, proportional layout resizing, and programmatic control via refs using the AllotmentHandle.
Allotment component is the primary interface for creating split-pane layouts. It provides the core functionality required to manage multiple panes and their resizing behavior.Allotment.Pane sub-component instead of relying solely on the top-level Allotment component.Install the allotment package and save it to your package.json dependencies using one of the following commands:
npm
npm install allotmentyarn
yarn add allotmentPeer Dependencies Ensure your project includes the following peer dependencies:
react >= 17.0.0react-dom >= 17.0.0npm iAllotment is a React-based split-pane component. To use it, ensure you have react and react-dom installed as peer dependencies, then install allotment via npm.
npm install react react-dom
npm install allotmentIf your content is larger than the Allotment pane, you can enable scrolling by wrapping your content in a div with the following CSS properties:
width: 100%height: 100%overflow: autoThis ensures the wrapper matches the pane's dimensions and triggers browser scrolling when content overflows.
Start a local development server to preview the website. This command opens a browser window and supports live reloading, meaning most changes are reflected immediately without restarting the server.
npm run startminSize and maxSize props to the same value.To create a basic split-pane layout, wrap your panes in the Allotment component.
Important: You must import the required CSS for the layout to render correctly:
import "allotment/dist/style.css"
import * as React from "react";
import ReactDOM from "react-dom";
import { Allotment } from "allotment";
import "allotment/dist/style.css";
function App() {
return (
<Allotment>
<div>Pane 1</div>
<div>Pane 2</div>
</Allotment>
);
}
ReactDOM.render(<App />, document.querySelector("#app"));Generate the static content for the website. The output will be placed in the build directory and is ready to be served by any static content hosting service.
npm run buildWhen adding or removing views, you can use Sizing strategies to control how the available space (the delta) is redistributed among other views. Use the Sizing namespace for convenience.
Strategies:
Sizing.Distribute: Distributes the delta space equally among all other views.Sizing.Split(index): Splits the delta space with a specific view at the provided index.Sizing.Invisible(cachedVisibleSize): Treats the view as if it were invisible, using the provided cachedVisibleSize to maintain layout stability.