React Splitter

React Splitter is utilized to separate and resize panels.

Setup

Refer to PrimeReact setup documentation for download and installation steps for your environment.

Import

import { Splitter, SplitterPanel } from 'primereact/splitter';

Getting Started

Splitter requires two SplitterPanel components to wrap.

<Splitter style={{height: '300px'}}>
    <SplitterPanel>
        Panel 1
    </SplitterPanel>
    <SplitterPanel>
        Panel 2
    </SplitterPanel>
</Splitter>

Layout

Default orientation is configured with the layout property and default is the "horizontal" whereas other alternative is the "vertical".

<Splitter style={{height: '300px'}} layout="vertical">
    <SplitterPanel>
        Panel 1
    </SplitterPanel>
    <SplitterPanel>
        Panel 2
    </SplitterPanel>
</Splitter>

Initial Sizes

When no size is defined, panels are split 50/50, use the size property to give relative widths e.g. 20/80.

<Splitter>
    <SplitterPanel size={20}>
        Panel 1
    </SplitterPanel>
    <SplitterPanel size={80}>
        Panel 2
    </SplitterPanel>
</Splitter>

Minimum Size

Minimum size defines the lowest boundary for the size of a panel.

<Splitter>
    <SplitterPanel size={20} minSize={10}>
        Panel 1
    </SplitterPanel>
    <SplitterPanel size={80} minSize={20}>
        Panel 2
    </SplitterPanel>
</Splitter>

Nested Panels

Splitters can be combined to create advanced layouts.

<Splitter style={{height: '300px'}}>
    <SplitterPanel className="p-d-flex p-ai-center p-jc-center" size={20} minSize={10}>
        Panel 1
    </SplitterPanel>
    <SplitterPanel size={80}>
        <Splitter layout="vertical">
            <SplitterPanel className="p-d-flex p-ai-center p-jc-center" size={15}>
                Panel 2
            </SplitterPanel>
            <SplitterPanel size={85}>
                <Splitter>
                    <SplitterPanel className="p-d-flex p-ai-center p-jc-center" size={20}>
                        Panel 3
                    </SplitterPanel>
                    <SplitterPanel className="p-d-flex p-ai-center p-jc-center" size={80}>
                        Panel 4
                    </SplitterPanel>
                </Splitter>
            </SplitterPanel>
        </Splitter>
    </SplitterPanel>
</Splitter>

Stateful

Splitters can be configured as stateful so that when the user visits the page again, the adjusts sizes can be restored. Define a stateKey to enable this feature. Default location of the state is session storage and other option is the local storage which can be configured using the stateStorage property.

<Splitter stateKey={"mykey"} stateStorage={"local"}>
    <SplitterPanel>
        Panel 1
    </SplitterPanel>
    <SplitterPanel>
        Panel 2
    </SplitterPanel>
</Splitter>

Theming

Splitter supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeReact Splitter showcase for demos and documentation.