Everything you need to know about layout components in React js😎

Some examples of layout components.

Layout components are components in React whose primary concern is helping us to arrange other components that we create on the page. Some of the examples of layout components are Split screens, Modals, List and list item components, etc. It’s nothing more than splitting and resuing the code smartly.

💡Idea of Layout Components

This is how we split the code.

Lets’s dive into an example in order to understand layout components.

SplitScreen Layout.

There are large number of instances when we come across split screens, henceforth whenever you come across split screen I want you guys to think how the logical division of components must have been done.🤔

Let me type down some code which we will discuss further.

This is our SplitScreen Component

import styled from 'styled-components'
import React from 'react'

const Container = styled.div`
                      display:flex;
                  `

const Pane = styled.div`
                flex:${props=>props.wt};
                border:2px solid red;
                height:100vh;
              `

function SplitScreen(props) {
  const [left,middle,right] = props.children;
  const {leftWeight,middleWeight, rightWeight}=props;
  return (
          <Container>
              <Pane wt={leftWeight}>
                  {left}
              </Pane>
              <Pane wt={middleWeight}>
                  {middle}
              </Pane>
              <Pane wt={rightWeight}>
                  {right}
              </Pane>
          </Container> 
  )
}

export default SplitScreen

The Container component represents the main container for the split-screen layout. It uses a tagged template literal to define the CSS rules for the container. In this case, the container has display: flex, which makes its child elements align in a row.

The Pane component is also defined using styled.div. It represents each pane or section of the split-screen layout. It accepts a prop called wt (short for weight) which is used to dynamically set the flex property of the pane. The flex property determines how the available space is distributed among the panes.

Inside the SplitScreen component, the child elements are destructured from props.children and assigned to left, middle, and right variables.

The weights of the left, middle, and right panes are extracted from props using destructuring assignment and assigned to leftWeight, middleWeight, and rightWeight variables, respectively.

The SplitScreen component renders the Container component, which acts as the main wrapper for the split-screen layout.

Inside the Container component, three Pane components are rendered. The wt prop of each Pane component is set to the respective weight values extracted from props.

The left, middle, and right child elements are rendered within their respective Pane components.

So I think it’s pretty clear how the SplitScreen Component is created. Let’s understand how should we use this component.

import React from 'react'
import SplitScreen from './SplitScreen.jsx'

const LeftComponent = ({message})=><h2>{message}</h2>
const MiddleComponent = ({message})=><h2>{message}</h2>
const RightComponent = ({message})=><h2>{message}</h2>

function App() {

  return (
         <SplitScreen leftWeight={1} middleWeight={2} rightWeight={3}>
                <LeftComponent message="This is left"/>
                <MiddleComponent message="This is middle"/>
                <RightComponent message="This is right"/>
         </SplitScreen>
  )
}

export default App

We are passing left, middle and right components as children of SplitScreen Component. Good thing about this is you can replace all the children with any of the components and the screen will still get split according to the weight we are passing as props to SplitScreen. For experiment purpose try changing the leftWeight, middleWeight and rightWeight and see how the page is divided. 🤓

Kudossss!!!! you have stepped into using layout components. Wasn’t that easy???

This was one of the simplest example I can think of to get started with following design patterns. Using layout components we can ensure consistency in the appearance and behavior of different sections or elements within your application. By centralizing the layout logic in dedicated components, it becomes easier to make changes or updates to the layout across multiple pages or components. This improves the maintainability of your codebase and makes it easier to manage and evolve the UI.