react-view-split

Create resizible views (panels) in react.

Features:

• Size is less than 2 kb
• Support both horizontal and vertical splits
• Support multiple splits
• Support lifecyle functions
• Support min and max sizes
• Support custom divider size
• Support for legacy browser such as IE 11

Basic Example

In order for the below example to work correctly, the classname view-split needs to have display: flex.

import { ViewSplit } from "react-view-split";
import "./main.css";

function App() {
  const options = {
    dividerSize: 17,
  };
  return (
    <ViewSplit options={options}>
      <div>s</div>
      <div>p</div>
      <div>l</div>
      <div>i</div>
      <div>t</div>
    </ViewSplit>
  );
}

/* main.css */
.view-split {
  display: flex;
}

.divider {
  background-color: rgb(156, 70, 255);
}

API

<ViewSplit options={options}>
  <div>s</div>
  <div>p</div>
</ViewSplit>

options Type: object

divide Type: string Default: 'vertical' Values: 'vertical' | 'horizontal'

sizes Type: number | Array<number> Default: new Array(children.length).fill(children.length / 2)

minSizes Type: number | Array<number> Default: new Array(children.length).fill(0)

maxSizes Type: number | Array<number> Default: new Array(children.length).fill(Number.POSITIVE_INFINITY)

onDrag Type: Function(sizes)

beforeDrag Type: Function(sizes)

afterDrag Type: Function(sizes)

More Examples

horizontal divide

import { ViewSplit } from "react-view-split";
import "./main.css";

function App() {
  const options = {
    dividerSize: 17,
    divide: "horizontal",
  };
  return (
    <ViewSplit options={options}>
      <div>s</div>
      <div>p</div>
      <div>l</div>
      <div>i</div>
      <div>t</div>
    </ViewSplit>
  );
}

/* main.css */
.view-split {
  display: flex;
  flex-direction: column;
}

.divider {
  background-color: rgb(156, 70, 255);
}