Getting Started with React Splitter

7 Oct 202512 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

You can use Create-react-app to setup the applications.
To install create-react-app run the following command.

    ```
     npm install -g create-react-app
    ```

Start a new project using create-react-app command as follows

  <div class='tsx'>

  ```
    create-react-app quickstart --scripts-version=react-scripts-ts
    cd quickstart
  ```
    </div>
    <div class='jsx'>
  ```
     create-react-app quickstart
     cd quickstart
  ```
     </div>

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

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

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 through <SplitterComponent> tag-directive with <PanesDirective> and <PaneDirective> as child elements respectively.

Please refer the below code snippet,

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

function App() {
  return (
    <div className="App">
    <SplitterComponent id="splitter" height="250px" width="600px">
        <PanesDirective>
          <PaneDirective/>
          <PaneDirective/>
          <PaneDirective/>
        </PanesDirective>
    </SplitterComponent>
    </div>
  );
}

export default App;

After completing the configurations to render the Splitter, use the following command to display the output in your default browser.

     ```
      npm start
     ```

Output will be as follows:

app.jsx
app.tsx
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
function App() {
    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";

function App() {
  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 pane layouts. By default, it renders in Horizontal orientation. Change it using the orientation property.

app.jsx
app.tsx
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
function App() {
    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";

function App() {
  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 into Panes

Load pane content as an HTML element or string using the content property.

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";
import { useState } from 'react';
function App() {
    const firstPaneContent = `<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>`;
    const secondPaneContent = `<div>
      <div className="content">
        <h3 className="h3">CSS</h3>
        <div className="code-preview">
        <span>img { </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> }</span>
        </div>
      </div>
      </div>`;
    const thirdPaneContent = `<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() { </div>
            <div>// Code block for click action</div>
          <span> }); </span>
          </div>
        </div>
      </div>`;
    const [pane1Content] = useState(firstPaneContent);
    const [pane2Content] = useState(secondPaneContent);
    const [pane3Content] = useState(thirdPaneContent);
    return (<div className="App">
      <SplitterComponent id="splitter" height="250px" width="550px">
        <PanesDirective>
          <PaneDirective content={pane1Content}/>
          <PaneDirective content={pane2Content}/>
          <PaneDirective content={pane3Content}/>
        </PanesDirective>
      </SplitterComponent>
    </div>);
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
import { useState } from 'react';

function App() {
  const firstPaneContent = `<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>`;

  const secondPaneContent = `<div>
      <div className="content">
        <h3 className="h3">CSS</h3>
        <div className="code-preview">
        <span>img { </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> }</span>
        </div>
      </div>
      </div>`;

  const thirdPaneContent = `<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() { </div>
            <div>// Code block for click action</div>
          <span> }); </span>
          </div>
        </div>
      </div>`;

  const [pane1Content] = useState(firstPaneContent);
  const [pane2Content] = useState(secondPaneContent);
  const [pane3Content] = useState(thirdPaneContent);

  return (
    <div className="App">
      <SplitterComponent id="splitter" height="250px" width="550px">
        <PanesDirective>
          <PaneDirective content={pane1Content} />
          <PaneDirective content={pane2Content} />
          <PaneDirective content={pane3Content} />
        </PanesDirective>
      </SplitterComponent>
    </div>
  );
}

export default App;

Search docs

Ask HelpBot