Implementing Syncfusion React Splitter

When to Use This Skill

• Create flexible layouts with multiple resizable panels
• Build split-screen interfaces (code editors, dashboards, file explorers)
• Allow users to adjust pane sizes dynamically
• Display collapsible panes with expand/collapse functionality
• Support different layout orientations (horizontal, vertical, nested)
• Implement responsive multi-panel layouts
• Add custom content types (HTML, components, selectors) to panes

Component Overview

<PaneDirective>

<PanesDirective>

• Multiple layout orientations (horizontal, vertical, nested)
• Dynamic pane resizing with constraints
• Expand/collapse pane functionality
• Multiple content types (HTML, components, CSS selectors)
• Events for resize, expand, collapse operations
• Add/remove panes dynamically at runtime
• Accessibility and RTL support
• Theme customization

npm install @syncfusion/ej2-react-layouts --save

Documentation and Navigation Guide

Getting Started

• Installation and package setup
• CSS imports and theme configuration
• Basic Splitter initialization with PanesDirective
• First working example
• Import statements and dependencies

API Reference: Properties and Configuration

• Complete SplitterComponent properties (orientation, height, width, separatorSize, etc.)
• All PaneDirective properties (size, min, max, collapsed, collapsible, resizable, content, cssClass)
• enablePersistence for state persistence
• enableHtmlSanitizer for security
• Common configuration patterns and examples

API Reference: Methods

• addPane() - Dynamically add new panes with PanePropertiesModel
• removePane() - Remove panes by index
• collapse() - Programmatically collapse panes
• expand() - Programmatically expand panes
• destroy() - Component cleanup and resource release
• Real-world examples with working code

API Reference: Events

• created - Component initialization
• beforeCollapse / collapsed - Collapse events with cancellation
• beforeExpand / expanded - Expand events with data loading
• resizeStart / resizing / resizeStop - Resize lifecycle
• Event handling patterns and state management

Pane Layout Configuration

• Horizontal and vertical layouts
• Multiple panes and nested splitters
• Pane properties and configuration
• Layout patterns for common use cases

Pane Sizing and Separation

• Fixed pane sizing
• Percentage-based sizing
• Min and max size constraints
• Separator styling and customization
• Dynamic size adjustments

Expand and Collapse Functionality

• Collapsed state initialization
• Button integration for expand/collapse
• User-driven vs programmatic collapse
• Event handling patterns

Resize Behavior

• Resize events and lifecycle
• Preventing resize on specific panes
• Dynamic resize configuration
• Resize constraints and validation
• Event data and handling

Pane Content and Styling

• HTML content in panes
• React component content in panes
• CSS selector-based content
• Pane template usage
• Custom styling and classes

Accessibility and Globalization

• WCAG compliance and keyboard navigation
• ARIA attributes and screen reader support
• RTL (Right-to-Left) support
• Internationalization and locale
• Focus management and accessibility patterns

Style Customization

• CSS customization and custom classes
• Theme variables and CSS imports
• Gripper and separator styling
• Responsive design patterns
• Dark mode and theme switching

Quick Start Example

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
import './App.css';

function App() {
  return (
    <div className='App'>
      <SplitterComponent>
        <PanesDirective>
          <PaneDirective size='200px'>
            <div>Left Panel</div>
          </PaneDirective>
          <PaneDirective size='300px'>
            <div>Right Panel</div>
          </PaneDirective>
        </PanesDirective>
      </SplitterComponent>
    </div>
  );
}

export default App;

Common Patterns

Two-Column Layout

<SplitterComponent orientation='Horizontal'>
  <PanesDirective>
    <PaneDirective size='25%'><div>Left</div></PaneDirective>
    <PaneDirective size='75%'><div>Main Content</div></PaneDirective>
  </PanesDirective>
</SplitterComponent>

Vertical Split with Collapse

<SplitterComponent orientation='Vertical'>
  <PanesDirective>
    <PaneDirective size='50%' collapsed={true}><div>Top</div></PaneDirective>
    <PaneDirective size='50%'><div>Bottom</div></PaneDirective>
  </PanesDirective>
</SplitterComponent>

Three-Panel Dashboard

<SplitterComponent orientation='Horizontal'>
  <PanesDirective>
    <PaneDirective size='20%'><div>Sidebar</div></PaneDirective>
    <PaneDirective size='60%'><div>Main Content</div></PaneDirective>
    <PaneDirective size='20%'><div>Right Panel</div></PaneDirective>
  </PanesDirective>
</SplitterComponent>

Nested Splitters

Key Props

orientation

size

min

max

collapsed

collapsible

resizable

Common Use Cases