Resizable split pane layouts for React applications with react-resplit

Some of the key features that sets it apart from others in the space:

• Flexible hook-based API that works with any styling method
• Built with modern CSS, a grid-based layout and custom properties
• Works with any amount of panes in a vertical or horizontal layout
• Built following the Window Splitter pattern for accessibility and keyboard controls

Usage

It is pretty simple to use too, start by installing the package:

npm install react-resplit

Then import the useResplit hook and register the container, panes and splitters.

import { useResplit } from "react-resplit";

function App() {
  const { getContainerProps, getSplitterProps, getPaneProps } = useResplit({
    direction: "horizontal",
  });

  return (
    <div {...getContainerProps()}>
      <div {...getPaneProps(0, { initialSize: "0.5fr" })}>Pane 1</div>
      <div {...getSplitterProps(1, { size: "10px" })} />
      <div {...getPaneProps(2, { initialSize: "0.5fr" })}>Pane 2</div>
    </div>
  );
}

Styling

The container, splitter and pane elements are all unstyled by default apart from a few styles that are necessary for the layout - this is intentional so that the library remains flexible.

Resplit will apply the correct cursor based on the direction provided to the hook.

As a basic example, you could provide a className prop to the splitter elements and style them as a solid 10px divider.

<div className="splitter" {...getSplitterProps(1, { size: "10px" })} />

.splitter {
  width: 100%;
  height: 100%;
  background: #ccc;
}

Accessibility

Resplit has been implemented using guidence from the Window Splitter pattern.

In addition to built-in accessibility considerations, you should also ensure that splitters are correctly labelled.

If the primary pane has a visible label, the aria-labelledby attribute can be used.

<div {...getPaneProps(0)}>
  <h2 id="pane-1-label">Pane 1</h2>
</div>
<div aria-labelledby="pane-1-label" {...getSplitterProps(1)} />

Alternatively, if the pane does not have a visible label, the aria-label attribute can be used.

<div aria-label="Pane 1" {...getSplitterProps(1)} />

Interested in learning more?

For a more detailed look at the library, check out the GitHub repository.