React-page-split NPM

react-page-split

React components & hooks for page splitting.

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

Installation

npm install --save react-page-split

Examples

Basic

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>
    )
}

Example

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.

Proportional resize

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.

Cascade resize

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.

Reverse cascade resize

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.

Limit resize

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.

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.

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