react-page-split

React components & hooks for page splitting.

Demo

IE / Edge	Firefox	Chrome	Opera
Edge	29+	32+	20+

Installation

npm install --save react-page-split

Examples

Basic

• Horizontal
• Vertical

Advanced

• Nested
  • Demonstrates nesting page splits within one another.
• Preset Sizes
  • Demonstrates specifying initial sizes for each panel.
• Resizes
  • Demonstrates the difference in Proportional, Cascade, ReverseCascade, and Limit resizes.
• Boundaries
  • Demonstrates setting a min-width and max-width on a panel.
• Divider on Hover
  • Demonstrates a divider that is 11px wide, but appears 1px wide until hovered.
• Divider with Buttons
  • Demonstrates embedding a <button> on a custom divider.
• Events
  • Demonstrates listening to the events published when a divider is dragged.
• Expand Collapse
  • Demonstrates expanding & collapsing panels on <button> click.

Usage

import {
    HorizontalPageSplit,
    VerticalPageSplit
} from 'react-page-split';
import 'react-page-split/style.css';

function Example() {
    return (
        <HorizontalPageSplit widths={['20%', '50%', '30%']}>
            <VerticalPageSplit>
                <div>Top left</div>
                <div>Middle left</div>
                <div>Bottom left</div>
            </VerticalPageSplit>

            <div>Middle</div>

            <VerticalPageSplit heights={['25%', '75%']}>
                <div>Top right</div>
                <div>Bottom right</div>
            </VerticalPageSplit>
        </HorizontalPageSplit>
    )
}

Resizes

There are four defined resizes that occur when dragging a divider. The default is for panels to be resized at a Proportional rate.

A custom Resize can also be provided.

Demo

Proportional

A Proportional resize affects all panels across the axis at a proportionally equal rate.

Code

import {
    HorizontalPageSplit,
    Proportional
} from 'react-page-split';
import 'react-page-split/style.css';

function CascadeBehaviourExample() {
    return (
        <HorizontalPageSplit resize={Proportional}>
            <div>A</div>
            <div>B</div>
            <div>C</div>
            <div>D</div>
        </HorizontalPageSplit>
    )
}

Cascade

A Cascade resize cascades across all panels along the axis, starting with the closest panel.

Code

import {
    HorizontalPageSplit,
    Cascade
} from 'react-page-split';
import 'react-page-split/style.css';

function CascadeBehaviourExample() {
    return (
        <HorizontalPageSplit resize={Cascade}>
            <div>A</div>
            <div>B</div>
            <div>C</div>
            <div>D</div>
        </HorizontalPageSplit>
    )
}

Reverse Cascade

A ReverseCascade resize cascades across all panels along the axis, starting with the furthest panel.

Code

import {
    HorizontalPageSplit,
    ReverseCascade
} from 'react-page-split';
import 'react-page-split/style.css';

function CascadeReverseBehaviourExample() {
    return (
        <HorizontalPageSplit resize={ReverseCascade}>
            <div>A</div>
            <div>B</div>
            <div>C</div>
            <div>D</div>
        </HorizontalPageSplit>
    )
}

Limit

A Limit resize causes a resize to be limited within panels adjacent to the dragged divider.

Code

import {
    HorizontalPageSplit,
    Limit
} from 'react-page-split';
import 'react-page-split/style.css';

function LimitBehaviourExample() {
    return (
        <HorizontalPageSplit resize={Limit}>
            <div>A</div>
            <div>B</div>
            <div>C</div>
            <div>D</div>
        </HorizontalPageSplit>
    )
}

Customization

All parts of the library may be customized, either via CSS or via the API.

Hooks

The hooks allow you to apply the necessary styles, classes, and event listeners to any element.

useDivider

import {
    DividerProps,
    HorizontalPageSplit,
    useDivider
} from 'react-page-split';
import 'react-page-split/style.css';

function CustomDividerExample() {
    return (
        <HorizontalPageSplit divider={CustomDivider}>
            <div>A</div>
            <div>B</div>
        </HorizontalPageSplit>
    )
}

function CustomDivider(props: DividerProps<HTMLDivElement>) {
    const {
        index,
        ...rest
    } = props;

    const {
        children,
        ...dividerProps
    } = useDivider({
        className: 'custom-divider',
        ...rest
    });

    return (
        <div {...dividerProps}>
            <span>Divider #{index + 1}</span>
            {children}
            <button>My custom button</button>
        </div>
    );
}

Components

The components take various props that allow you to embed custom behaviour.

<HorizontalPageSplit divider={...}>

import {
    HorizontalDivider,
    HorizontalDividerProps,
    HorizontalPageSplit
} from 'react-page-split';
import 'react-page-split/style.css';

function CustomDividerExample() {
    return (
        <HorizontalPageSplit divider={CustomDivider}>
            <div>A</div>
            <div>B</div>
        </HorizontalPageSplit>
    )
}

function CustomDivider(props: HorizontalDividerProps) {
    const {
        index,
        children,
        ...rest
    } = props;

    return (
        <HorizontalDivider className="custom-divider" index={index} {...rest}>
            <span>Divider #{index + 1}</span>
            {children}
            <button>My custom button</button>
        </HorizontalDivider>
    );
}

Contributing

Bug reports and pull requests are welcome on GitHub.

License

This project is available under the terms of the ISC license. See the LICENSE file for the copyright information and licensing terms.