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"));