Getting Started with React Splitter

7 Oct 202515 minutes to read

The following section explains the steps required to build the Splitter component with a step-by-step procedure.

Dependencies

The following dependencies are required to use the Splitter component in your application:

|-- @syncfusion/ej2-layouts
    |-- @syncfusion/ej2-base
|-- @syncfusion/ej2-react-layouts
    |-- @syncfusion/ej2-react-base

Installation and configuration

To quickly set up a React application, use create-vite-app, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like create-react-app. For detailed steps, refer to the Vite installation instructions. Vite sets up your environment using JavaScript and optimizes your application for production.

Note: To create a React application using create-react-app, refer to this Syncfusion guide for more details.

To create a new React application, run the following command.

npm create vite@latest my-app

To set up a React application in TypeScript environment, run the following command.

npm create vite@latest my-app --template react-ts
cd my-app
npm run dev

To set up a React application in JavaScript environment, run the following command.

npm create vite@latest my-app --template react
cd my-app
npm run dev

Install the below required dependency package in order to use the Splitter component in your application.

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

Adding CSS Reference

The Splitter CSS files are available in the ej2-layouts package folder.
This can be referred in your application using the following code.

[src/App.css]

@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-layouts/styles/material.css';

Adding Splitter to the project

Initialize the Splitter using the<SplitterComponent> tag-directive with <PanesDirective> and <PaneDirective> child elements respectively.

Please refer the below code snippet,

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

class App extends React.Component {
  public render() {
    return (
      <div className="App">
      <SplitterComponent id="splitter" height="250px" width="600px">
          <PanesDirective>
            <PaneDirective/>
            <PaneDirective/>
            <PaneDirective/>
          </PanesDirective>
      </SplitterComponent>
      </div>
    );
  }
}

export default App;

Now run the npm run dev command in the console to start the development server. This command compiles your code and serves the application locally, opening it in the browser.

npm run dev

Output will be as follows:

app.jsx
app.tsx
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
class App extends React.Component {
    render() {
        return (<div className="App">
        <SplitterComponent id="splitter" height="250px" width="600px">
          <PanesDirective>
            <PaneDirective />
            <PaneDirective />
            <PaneDirective />
          </PanesDirective>
        </SplitterComponent>
      </div>);
    }
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

class App extends React.Component {
  public render() {
    return (
      <div className="App">
        <SplitterComponent id="splitter" height="250px" width="600px">
          <PanesDirective>
            <PaneDirective/>
            <PaneDirective/>
            <PaneDirective/>
          </PanesDirective>
        </SplitterComponent>
      </div>
    );
  }
}

export default App;

Orientation

Splitter supports both Horizontal and Vertical orientations. By default, it renders in Horizontal orientation. Change the layout by setting the orientation property.

app.jsx
app.tsx
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
class App extends React.Component {
    render() {
        return (<div className="App">
            <SplitterComponent id="splitter-vertical" height="250px" width="50%" orientation={'Vertical'}>
              <PanesDirective>
                <PaneDirective />
                <PaneDirective />
              </PanesDirective>
            </SplitterComponent>
          </div>);
    }
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

class App extends React.Component {
  public render() {
    return (<div className="App">
            <SplitterComponent id="splitter-vertical" height="250px" width="50%" orientation = {'Vertical'}>
              <PanesDirective>
                <PaneDirective/>
                <PaneDirective/>
              </PanesDirective>
            </SplitterComponent>
          </div>
    );
  }
}

export default App;

Load content to the pane

Use the content property to load pane contents as an HTML element or string.

For detailed information, refer to the Pane Content section.

app.jsx
app.tsx
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
class App extends React.Component {
    firstPane() {
        return (<div>
    <div className="content">
      <h3 className="h3">HTML</h3>
      <div className="code-preview">
        &lt;<span>!DOCTYPE html&gt;</span>
        <div>&lt;<span>html&gt;</span></div>
        <div>&lt;<span>body&gt;</span></div>
        &lt;<span>div</span> id="custom-image"&gt;
        <div>&lt;<span>img</span> src="src/albert.png"&gt;</div>
        <div>&lt;<span>div</span>&gt;</div>
        <div>&lt;<span>/body&gt;</span></div>
        <div>&lt;<span>/html&gt;</span></div>
      </div>
    </div>
    </div>);
    }
    secondPane() {
        const openBrace = '{';
        const closeBrace = '}';
        return (<div>
    <div className="content">
      <h3 className="h3">CSS</h3>
      <div className="code-preview">
      <span>img {openBrace} </span>
      <div id="code-text">margin:<span>0 auto;</span></div>
      <div id="code-text">display:<span>flex;</span></div>
      <div id="code-text">height:<span>70px;</span></div>
      <span>{closeBrace}</span>
      </div>
    </div>
    </div>);
    }
    thirdPane() {
        const openBrace = '{';
        const closeBrace = '}';
        return (<div>
      <div className="content">
        <h3 className="h3">JavaScript</h3>
        <div className="code-preview">
        <span>var</span> image = document.getElementById("custom-image");
        <div>image.addEventListener("click", function() {openBrace}</div>
          <div> // Code block for click action</div>
        // Code block for click action</div>
        <span> {closeBrace}) </span>
        </div>
      </div>
    </div>);
    }
    render() {
        return (<div className="App">
  <SplitterComponent id="splitter" height="250px" width="550px">
  <PanesDirective>
  <PaneDirective content={this.firstPane}/>
  <PaneDirective content={this.secondPane}/>
  <PaneDirective content={this.thirdPane}/>
  </PanesDirective>
  </SplitterComponent>
  </div>);
    }
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

class App extends React.Component {
public firstPane() {
  return (
    <div>
    <div className="content">
      <h3 className="h3">HTML</h3>
      <div className="code-preview">
        &lt;<span>!DOCTYPE html&gt;</span>
        <div>&lt;<span>html&gt;</span></div>
        <div>&lt;<span>body&gt;</span></div>
        &lt;<span>div</span> id="custom-image"&gt;
        <div>&lt;<span>img</span> src="src/albert.png"&gt;</div>
        <div>&lt;<span>div</span>&gt;</div>
        <div>&lt;<span>/body&gt;</span></div>
        <div>&lt;<span>/html&gt;</span></div>
      </div>
    </div>
    </div>
  );
}

public secondPane() {
  const openBrace: string = '{';
  const closeBrace: string = '}';
  return (
    <div>
    <div className="content">
      <h3 className="h3">CSS</h3>
      <div className="code-preview">
      <span>img {openBrace} </span>
      <div id="code-text">margin:<span>0 auto;</span></div>
      <div id="code-text">display:<span>flex;</span></div>
      <div id="code-text">height:<span>70px;</span></div>
      <span>{closeBrace}</span>
      </div>
    </div>
    </div>
  );
}

public thirdPane() {
  const openBrace: string = '{';
  const closeBrace: string = '}';
  return (
    <div>
      <div className="content">
        <h3 className="h3">JavaScript</h3>
        <div className="code-preview">
        <span>var</span> image = document.getElementById("custom-image");
        <div>image.addEventListener("click", function() { openBrace }</div>
          <div>// Code block for click action</div>
        <span> {closeBrace }) </span>
        </div>
      </div>
    </div>
  );
}

public render() {
  return (<div className="App">
  <SplitterComponent id="splitter" height="250px" width="550px">
  <PanesDirective>
  <PaneDirective content = {this.firstPane}/>
  <PaneDirective content = {this.secondPane}/>
  <PaneDirective content = {this.thirdPane}/>
  </PanesDirective>
  </SplitterComponent>
  </div>);
}
}

export default App;

Search docs

Ask HelpBot