How To Create A Split Panel In React. Part 1. Horizontal.

I didn’t feel very well, but I didn’t feel as sick as I ought to, not as sick as I would feel if I had a salaried job.

This is a quote from a book called “Farewell, My Lovely” by Raymond Chandler — one of the best noir writers ever lived. In the thumbnail, you can see the first three novels featuring an L.A. private eye Philip Marlowe.

You could also notice that the size of each section can be changed. Moreover, one can have as many sections as they like. Let’s see how it can be done with React.

The Beginning

I will assume that you already have a new React app created. We will start by creating a new folder src/split-panel that has two files: SplitPanel.js and SplitPanel.css . I won’t provide any CSS styles here. They are available in a GitHub repo. SplitPanel.js is the main component we will be working on. Let’s start by rendering two sections separated by a divider:

import './SplitPanel.css';

export const SplitPanel = () => {
    return (
        <div className='split-panel horizontal'>
            <div className='left'>Section 1</div>

            <div className='separator'></div>

            <div className='right'>Section 2</div>
        </div>
    )
}