Skip to main content

Getting Started

Allotment is available as an npm package.

Installation

To install and save in your package.json dependencies, run:

// with npm
npm install allotment

// with yarn
yarn add allotment

Please note that react >= 17.0.0 and react-dom >= 17.0.0 are peer dependencies.

Usage

Quick start

Here's a quick example to get you started:

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 1</div>
</Allotment>
);
}

ReactDOM.render(<App />, document.querySelector("#app"));
caution

Remember to import the required css: import "allotment/dist/style.css"

Control over individual panes

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.

import * as React from "react";
import ReactDOM from "react-dom";
import { Allotment } from "allotment";
import "allotment/dist/style.css";

function App() {
return (
<Allotment>
<Allotment.Pane minSize={200}>
<div>Pane 1</div>
</Allotment.Pane>
<Allotment.Pane snap>
<div>Pane 1</div>
</Allotment.Pane>
</Allotment>
);
}

ReactDOM.render(<App />, document.querySelector("#app"));