Resizing panes in React Splitter component

5 Mar 202624 minutes to read

The React Splitter component enables pane resizing by default. A gripper element is added to the separator to provide an intuitive pointer-based resize handle.

The horizontal Splitter allows resizing in horizontal directions.
The vertical Splitter allows resizing in vertical directions.

During resizing, the adjacent panes automatically adjust their dimensions to accommodate the change.

Minimum and Maximum size constraints

Define minimum and maximum sizes for each pane. Resizing is restricted within these boundaries to maintain layout integrity.

[Class-component]

app.jsx
app.tsx
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
class App extends React.Component {
    leftContent() {
        return (<div>
        <div className="content">
          <h3>PARIS </h3>
          Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
        </div>
      </div>);
    }
    middleContent() {
        return (<div>
        <div className="content">
          <h3>CAMEMBERT </h3>
          The village in the Orne département of Normandy where the famous French cheese is originated from.
        </div>
      </div>);
    }
    rightContent() {
        return (<div>
        <div className="content">
          <h3>GRENOBLE </h3>
          The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
        </div>
      </div>);
    }
    render() {
        return (<div className="App">
      <SplitterComponent id="percentage" height="250px" width='600px'>
        <PanesDirective>
          <PaneDirective size='200px' content={this.leftContent} min='20%' max='40%'/>
          <PaneDirective size='200px' content={this.middleContent} min='30%' max='60%'/>
          <PaneDirective size='200px' content={this.rightContent}/>
        </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 leftContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>PARIS </h3>
          Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
        </div>
      </div>
    );
  }
  public middleContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>CAMEMBERT </h3>
          The village in the Orne département of Normandy where the famous French cheese is originated from.
        </div>
      </div>
    );
  }
  public rightContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>GRENOBLE </h3>
          The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
        </div>
      </div>
    );
  }
  public render(): JSX.Element {
    return (<div className="App">
      <SplitterComponent id="percentage" height="250px" width='600px'>
        <PanesDirective>
          <PaneDirective size='200px' content = {this.leftContent} min='20%' max='40%'/>
          <PaneDirective size='200px' content = {this.middleContent} min='30%' max='60%'/>
          <PaneDirective size='200px' content = {this.rightContent} />
        </PanesDirective>
      </SplitterComponent>
  </div>);
  }
}
export default App;

[Functional-component]

app.jsx
app.tsx
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
function App() {
    function leftContent() {
        return (<div>
        <div className="content">
          <h3>PARIS </h3>
          Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
        </div>
      </div>);
    }
    function middleContent() {
        return (<div>
        <div className="content">
          <h3>CAMEMBERT </h3>
          The village in the Orne département of Normandy where the famous French cheese is originated from.
        </div>
      </div>);
    }
    function rightContent() {
        return (<div>
        <div className="content">
          <h3>GRENOBLE </h3>
          The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
        </div>
      </div>);
    }
    return (<div className="App">
      <SplitterComponent id="percentage" height="250px" width='600px'>
        <PanesDirective>
          <PaneDirective size='200px' content={leftContent} min='20%' max='40%'/>
          <PaneDirective size='200px' content={middleContent} min='30%' max='60%'/>
          <PaneDirective size='200px' content={rightContent}/>
        </PanesDirective>
      </SplitterComponent>
    </div>);
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

function App () {
  function leftContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>PARIS </h3>
          Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
        </div>
      </div>
    );
  }
  function middleContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>CAMEMBERT </h3>
          The village in the Orne département of Normandy where the famous French cheese is originated from.
        </div>
      </div>
    );
  }
  function rightContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>GRENOBLE </h3>
          The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
        </div>
      </div>
    );
  }

    return (<div className="App">
      <SplitterComponent id="percentage" height="250px" width='600px'>
        <PanesDirective>
          <PaneDirective size='200px' content = {leftContent} min='20%' max='40%'/>
          <PaneDirective size='200px' content = {middleContent} min='30%' max='60%'/>
          <PaneDirective size='200px' content = {rightContent} />
        </PanesDirective>
      </SplitterComponent>
    </div>);

}
export default App;

Disabling pane resizing

Set the resizable property to false to disable resizing for that specific pane.

[Class-component]

app.jsx
app.tsx
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
class App extends React.Component {
    leftContent() {
        return (<div>
        <div className="content">
          <h3>PARIS </h3>
          Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
        </div>
      </div>);
    }
    middleContent() {
        return (<div>
        <div className="content">
          <h3>CAMEMBERT </h3>
          The village in the Orne département of Normandy where the famous French cheese is originated from.
        </div>
      </div>);
    }
    rightContent() {
        return (<div>
        <div className="content">
          <h3>GRENOBLE </h3>
          The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
        </div>
      </div>);
    }
    render() {
        return (<div className="App">
      <SplitterComponent id="percentage" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content={this.leftContent} resizable={false}/>
        <PaneDirective size='200px' content={this.middleContent}/>
        <PaneDirective size='200px' content={this.rightContent}/>
      </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 leftContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>PARIS </h3>
          Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
        </div>
      </div>
    );
  }
  public middleContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>CAMEMBERT </h3>
          The village in the Orne département of Normandy where the famous French cheese is originated from.
        </div>
      </div>
    );
  }
  public rightContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>GRENOBLE </h3>
          The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
        </div>
      </div>
    );
  }
  public render(): JSX.Element {
    return (<div className="App">
      <SplitterComponent id="percentage" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content = {this.leftContent} resizable={false}/>
        <PaneDirective size='200px' content = {this.middleContent} />
        <PaneDirective size='200px' content = {this.rightContent} />
      </PanesDirective>
      </SplitterComponent>
    </div>);
  }
}
export default App;

[Functional-component]

app.jsx
app.tsx
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
function App() {
    function leftContent() {
        return (<div>
        <div className="content">
          <h3>PARIS </h3>
          Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
        </div>
      </div>);
    }
    function middleContent() {
        return (<div>
        <div className="content">
          <h3>CAMEMBERT </h3>
          The village in the Orne département of Normandy where the famous French cheese is originated from.
        </div>
      </div>);
    }
    function rightContent() {
        return (<div>
        <div className="content">
          <h3>GRENOBLE </h3>
          The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
        </div>
      </div>);
    }
    return (<div className="App">
      <SplitterComponent id="percentage" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content={leftContent} resizable={false}/>
        <PaneDirective size='200px' content={middleContent}/>
        <PaneDirective size='200px' content={rightContent}/>
      </PanesDirective>
      </SplitterComponent>
    </div>);
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

function App () {
  function leftContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>PARIS </h3>
          Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
        </div>
      </div>
    );
  }
  function middleContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>CAMEMBERT </h3>
          The village in the Orne département of Normandy where the famous French cheese is originated from.
        </div>
      </div>
    );
  }
  function rightContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>GRENOBLE </h3>
          The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
        </div>
      </div>
    );
  }

    return (<div className="App">
      <SplitterComponent id="percentage" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content = {leftContent} resizable={false}/>
        <PaneDirective size='200px' content = {middleContent} />
        <PaneDirective size='200px' content = {rightContent} />
      </PanesDirective>
      </SplitterComponent>
    </div>);

}
export default App;

Refreshing content during resize

Use the following events to refresh pane content dynamically during resize:

Customizing Resize-gripper and Cursor

Style the resize gripper icon and cursor via CSS to match the application’s design system.

[Class-component]

app.jsx
app.tsx
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
class App extends React.Component {
    leftContent() {
        return (<div>
        <div className="content">
          <h3>PARIS </h3>
          Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
        </div>
      </div>);
    }
    middleContent() {
        return (<div>
        <div className="content">
          <h3>CAMEMBERT </h3>
          The village in the Orne département of Normandy where the famous French cheese is originated from.
        </div>
      </div>);
    }
    rightContent() {
        return (<div>
        <div className="content">
          <h3>GRENOBLE </h3>
          The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
        </div>
      </div>);
    }
    render() {
        return (<div className="App">
      <SplitterComponent id="percentage" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content={this.leftContent}/>
        <PaneDirective size='200px' content={this.middleContent}/>
        <PaneDirective size='200px' content={this.rightContent}/>
      </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 leftContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>PARIS </h3>
          Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
        </div>
      </div>
    );
  }
  public middleContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>CAMEMBERT </h3>
          The village in the Orne département of Normandy where the famous French cheese is originated from.
        </div>
      </div>
    );
  }
  public rightContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>GRENOBLE </h3>
          The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
        </div>
      </div>
    );
  }
  public render(): JSX.Element {
    return (<div className="App">
      <SplitterComponent id="percentage" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content = {this.leftContent} />
        <PaneDirective size='200px' content = {this.middleContent} />
        <PaneDirective size='200px' content = {this.rightContent}  />
      </PanesDirective>
      </SplitterComponent>
  </div>);
  }
}
export default App;

[Functional-component]

app.jsx
app.tsx
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
function App() {
    function leftContent() {
        return (<div>
        <div className="content">
          <h3>PARIS </h3>
          Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
        </div>
      </div>);
    }
    function middleContent() {
        return (<div>
        <div className="content">
          <h3>CAMEMBERT </h3>
          The village in the Orne département of Normandy where the famous French cheese is originated from.
        </div>
      </div>);
    }
    function rightContent() {
        return (<div>
        <div className="content">
          <h3>GRENOBLE </h3>
          The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
        </div>
      </div>);
    }
    return (<div className="App">
      <SplitterComponent id="percentage" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content={leftContent}/>
        <PaneDirective size='200px' content={middleContent}/>
        <PaneDirective size='200px' content={rightContent}/>
      </PanesDirective>
      </SplitterComponent>
    </div>);
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

function App() {
  function leftContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>PARIS </h3>
          Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
        </div>
      </div>
    );
  }
  function middleContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>CAMEMBERT </h3>
          The village in the Orne département of Normandy where the famous French cheese is originated from.
        </div>
      </div>
    );
  }
  function rightContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>GRENOBLE </h3>
          The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
        </div>
      </div>
    );
   }
    return (<div className="App">
      <SplitterComponent id="percentage" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content = {leftContent} />
        <PaneDirective size='200px' content = {middleContent} />
        <PaneDirective size='200px' content = {rightContent}  />
      </PanesDirective>
      </SplitterComponent>
    </div>);
}
export default App;

Search docs

Ask HelpBot

Search docs

Ask HelpBot

How can I help you?

Resizing panes in React Splitter component

Minimum and Maximum size constraints

Disabling pane resizing

Refreshing content during resize

Customizing Resize-gripper and Cursor

See Also