Anyways, What are Layout components in React?

React is by a long shot the most popular front-end library on the market. It's modularity and component based architecture made it a front-end developer's favorite. By introducing the concept of the virtual DOM as a way of manipulating the DOM react created an abstraction concept that has been copied by a lot of main stream front end Libraries and framework.

In this Serie we will discuss a few Design patterns in React and How they can be implemented either in your side projects or customer ready apps the result will be the same you will start writing better React code.

The first Design pattern we will discuss is the Layout Design Pattern. The main idea behind building components using the Layout component pattern is that

Components should not know where they are being displayed and Layout components should only be concerned with displaying the component.

Let's use this pattern in an example to get a better grasp of what it server to do.
Let's say we are trying to build a split screen component to use in our project.

This is a SplitScreen component that displays two panels side by side.

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

const Container= styled.div`
display:flex;
`
const Panel= styled.div`
flex:${props=>props.width};
`;
export default const SplitScreen=({Left,Right,leftWidth=1,rightWidth=1})
{
return (
<Container>
  <Pane width={leftWidth}>
<Right/>
</Pane>
  <Pane width={rightWidth}>
<Right/>
</Pane>
</Container>
)
}

Now in our App component we can call

import React from 'react'
import styled from 'styled-component'

const LeftComponent=()=>(
<p style={{backgroundColor:'yellow'}}>Left</p>
)
const RightComponent=()=>(
<p style={{backgroundColor:'red'}}>Right</p>
)

function App (){
return (
<SplitScreen 
left={LeftComponent}
right={RightComponent}
leftWidth={1}
rightWidth={2}/>
)
}

export default App;

Let's say we need to pass a title props to both the Left and the right components. With our current implementation we would need to make a few changes.

import React from 'react'
import styled from 'styled-component'

const LeftComponent=({title})=><p style={{backgroundColor:'yellow'}}>{title}</p>
const RightComponent=({title})=><p style={{backgroundColor:'red'}}>{title}</p>

function App (){
return (
<SplitScreen 
left={LeftComponent}
right={RightComponent}
leftWidth={1}
rightWidth={2}/>
)
}

export default App;

In the SplitScreen.js file

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

const Container= styled.div`
display:flex;
`
const Panel= styled.div`
flex:${props=>props.width};
`;
export default const SplitScreen=({
Left,
Right,
leftWidth=1,
rightWidth=1,
 leftTitle='Left',
rightTitle='Right'})
{
return (
<Container>
  <Pane width={leftWidth}>
<Right title={leftTitle/>
</Pane>
  <Pane width={rightWidth}>
<Right title={rightTitle}/>
</Pane>
</Container>
)
}

This approach might work if we know for sure that our changes limits to this specific props and our component will not be used in a different context inside another component to add another prop to the Left or right component we would need to make even more changes.
This sometimes can lead to passing down multiple props to the component which can be an anti-pattern in React. Since the Left and Right components cannot accept props on their own currently we need to rewrite the code such that the SplitScreen component does not know about the props Left and Right need. So instead of passing Left and Right as props to SplitScreen we can put them as React children to SplitScreen.

import React from 'react'
import styled from 'styled-component'

const LeftComponent=({title='Left'})=>(
<p style={{backgroundColor:'yellow'}}>{title}</p>)
const RightComponent=({title='Right'})=>(
<p style={{backgroundColor:'red'}}>{title}</p>)

function App (){
return (
<SplitScreen  
leftWidth={1}
rightWidth={2}
>
<LeftComponent title={'Left Pane'}/>
<RightComponent title={'Right Panel}/>
</SplitScreen>
)
}

export default App;

And in the SplitScreen.js file:

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

const Container= styled.div`
display:flex;
`
const Panel= styled.div`
flex:${props=>props.width};
`;
export default const SplitScreen=({leftWidth=1,rightWidth=1,children})
{
const [left,right]= children
return (
<Container>
  <Pane width={leftWidth}>
{left}
</Pane>
  <Pane width={rightWidth}>
{right}
</Pane>
</Container>
)
}

By using this implementation we can now pass props to the Right and Left components directly without the need of passing through the SplitScreen component that only concern is to render component without actually knowing ahead of time what component it should render but only caring about the specific layout in which it should render those items. This also leads our code to be much more readable.

Thank you for reading.
Let's connect