Allotment

React split-pane component.

• React-based: Integrate effortlessly into your existing React-based application.
• Industry standard look and feel: Like VS Code's split view implementation? You're in luck! This component is derived from the same codebase.
• Dynamic: Want to declaratively add and remove panes? We've got you covered.

Getting Started

Allotment is available from npm.

Prerequisites

Allotment has react and react-dom as peer dependencies.

yarn add react react-dom

Installation

yarn add allotment

Usage

import React from "react";
import { Allotment } from "allotment";
import "allotment/dist/style.css";

export const App = () => (
  <Allotment>
    <ComponentA>
    <ComponentB>
  </Allotment>
);

Styling

Allotment uses CSS variables for styling. You can customize the following default variables.

:root {
  --focus-border: #007fd4;
  --sash-size: 8px;
  --sash-hover-size: 4px;
  --separator-border: #838383;
}

Frequently asked questions

Next.js

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.