React
Demos
Support
Forum
Download
Search results

Getting started with React Splitter component

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

Dependencies

The following list of dependencies 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

create-react-app quickstart --scripts-version=react-scripts-ts

cd quickstart
create-react-app quickstart

cd quickstart

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

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

The Splitter can be initialized 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";
import './App.css';

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;

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:

Source
Preview
index.tsx
index.html
App.css.jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('container'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Splitter</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />    
    <link href="//cdn.syncfusion.com/ej2/ej2-react-layouts/styles/material.css" rel="stylesheet" />    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='container'>
        <div id="root">
            <div id='loader'>Loading....</div>
        </div>
    </div>
</body>

</html>
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
import './App.css';
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;

Orientation

Splitter supports both Horizontal and Vertical orientation for the panes. By default, it will be rendered in Horizontal orientation. You can change it by using orientation property.

Source
Preview
index.tsx
index.html
App.css.jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('container'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Splitter</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />    
    <link href="//cdn.syncfusion.com/ej2/ej2-react-layouts/styles/material.css" rel="stylesheet" />    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='container'>
        <div id="root">
            <div id='loader'>Loading....</div>
        </div>
    </div>
</body>

</html>
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
import './App.css';
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;

Load content to the pane

You can load the pane contents in either HTML element or string types using content property.

For detailed information, refer to the Pane Content section

Source
Preview
index.tsx
index.html
App.css.jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('container'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Splitter</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />    
    <link href="//cdn.syncfusion.com/ej2/ej2-react-layouts/styles/material.css" rel="stylesheet" />    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='container'>
        <div id="root">
            <div id='loader'>Loading....</div>
        </div>
    </div>
</body>

</html>
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
import './App.css';
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;

See Also

Previous
Next