Layout Component | Design Patterns in React | SplitScreen Layout | Part 01

Introduction:

In modern web development, creating reusable and maintainable UI components is essential for building scalable applications. Styled Components, a popular CSS-in-JS library, allows us as developers to write CSS code directly within their JavaScript files.

Note: If you’re new to Styled Components and haven’t read my previous blog post on getting started, I encourage you to check it out here to familiarize yourself with the basics before proceeding further.

In this blog post, we will explore the concept of layout components with Styled Components, discussing various use cases and providing code examples. Whether you’re a beginner or an experienced developer, this blog will help you understand the basics and get you started with creating layout components using Styled Components.

Before jumping straight to the idea of layout components, it is important to know what the heck are Design Patterns in React ? I must say it is way more than what you think.

Design patterns in React are an effective solution to common application development challenges. This involves the concept of Container components, Higher Order Components, Custom Hooks, etc… and much more we will take up one by one in the upcoming blog posts. Among all these patterns Layout Component is one of them !

What are Layout Components ?

In simple words, Layout Components are those components that deals with the arrangement of child components on a particular page.

The Idea of layout component is that the child components shouldn’t know where they are being displayed on the screen.

Splitscreen Layout Component:

Before jumping to the explanation of the Splitscreen Layout Component, I insist you to have a look at the code snippet and make a high level visualization in your mind, how the page would look like.

In the provided code example, we have an App component that renders a SplitScreen component with two child components: LeftComponent and RightComponent. With this setup, you can now use the SplitScreen component to display the LeftComponent and RightComponent side by side, adjusting the weights to control the widths of each child component on the screen.

Okay so now you would be wondering how the SplitScreen component is implemented ?

Consider the code below to understand the design of SplitScreen component.

The SplitScreen component receives three props: children, leftWeight, and rightWeight. The children prop represents the child components passed within the SplitScreen component. In this case, we assume that there are exactly two child components.

Inside the SplitScreen component, we destructure the children prop into left and right elements using array destructuring.

Then, we render the Container component, which serves as the main wrapper for our split screen layout. Inside the Container, we render two instances of the Pane component. We pass the leftWeight and rightWeight props to control the width ratios of the left and right panes.

Finally, we render the left element within the first Pane and the right element within the second Pane.

That’s it! With this code, we have created a flexible and reusable SplitScreen component that can be used to create split screen layouts with varying width ratios for the left and right sections.

Note: Within the SplitScreen component, the children prop will be an array containing LeftComponent and RightComponentcomponents. By using array destructuring, we can assign the components to any variables of our choice, in this case we are using theleft and right variables. So you can see we are using {left} and {right} inside Pane component.

Conclusion:

Through these examples, I hope I have provided you, as a developer, with a fresh perspective on Layout Components. By considering this approach, you can make informed decisions while writing code in React and create a more developer-friendly codebase yet building scalable and responsive user interfaces.

By treating React components as layout components, if we closely look we are actually encapsulating the structure and arrangement of elements within reusable and maintainable Layout components. This not only enhances code organization but also promotes consistency and scalability in your application’s UI.

So, the next time you’re designing your React application’s UI, consider the potential React components which can be tagged as layout components, and make your codebase more developer-friendly and easier to maintain.

Happy Coding !

Check out Part 02 Modal Layout

If you found this article helpful, stay tuned for more insightful learnings to help you take more informed decisions in your software engineering career. Subscribe to receive regular updates with valuable content and stay ahead of the curve.

Cheers to a bit easier developer life!