Essential tools for implementing React panel layouts
Tags: react, webdev
Published: 2024-03-19 14:19:56

**Written by [David Omotayo
](https://blog.logrocket.com/author/davidomotayo/)✏️**

The web landscape has undergone a dramatic transformation in recent years. Today, building interfaces that seamlessly blend visual appeal and functionality is essential. This need for captivating experiences drives the ever-growing demand for dynamic and responsive layouts. 

Compositional frameworks like React have become the go-to tools for building modern web applications. As a result, the need for layouts that adapt and interact flawlessly across devices has reached an all-time high. 

In this comprehensive guide, we'll delve into the importance of implementing dynamic panel layouts in your React applications. We’ll also explore various tools in the React ecosystem that will help you create these versatile and user-friendly interfaces.

## Overview of dynamic layout panel in React

Dynamic panel layout, also known as responsive panel layout, is a responsive and flexible method of arranging user interface elements in web applications. These layouts allow components to resize, reorder, or adjust based on user interactions, creating a more dynamic and interactive experience: ![Dynamic Layout Panel Demo](https://blog.logrocket.com/wp-content/uploads/2024/03/dynamic-layout-panel-demo.gif) 

Their adaptability makes them ideal for designing interfaces that adapt to different screen sizes and user preferences. This ensures usability and visual appeal across devices, from desktops to tablets and smartphones, optimizing your application's accessibility. But the benefits of dynamic layouts go beyond just responsiveness. 

Dynamic panel layouts shine in scenarios with specific layout requirements, like dashboards where information prioritization is crucial. Resizable elements, draggable components, and real-time updates can become essential tools for users to navigate and manipulate data effectively. 

The ability to resize elements with precision enables users to customize screen space according to their preferences. Whether they prioritize the visibility of content, navigation, or data visualization, dynamic layouts provide the versatility to achieve their desired focus. A practical example of this is a code editor where panels resize and collapse seamlessly, adapting the view to the user's current task: ![Code Editor Demonstrating Panels Resizing And Collapsing According To The User's Activity](https://blog.logrocket.com/wp-content/uploads/2024/03/code-editor-panels-resizing-collapsing.gif) 

Although these complex layout structures can significantly improve the intuitive and interactive user experience of your application, creating them from the ground up can be time-consuming, even with [React's compositional approach](https://blog.logrocket.com/custom-compositional-api-react-aria/#creating-custom-compositional-api-react-aria:~:text=the%20component%20files.-,Creating%20a%20custom%20compositional%20API%20with%20React%20Aria,-Now%20let%E2%80%99s%20explore). 

While React helps manage complexity to some extent, efficiency is often compromised. Fortunately, the React ecosystem offers tools like react-resizable-panels and react-resizable-layout, which provide pre-built components and hooks specifically designed for creating resizable panel groups and layouts, saving you development time and effort.

## react-resizable-panels

[react-resizable-panels](https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels) is an open source package that allows you to create panel group layouts that can either be resized horizontally or vertically. The package provides three primary predefined container components that let you render data in resizable panels within a group layout:

*   `PanelGroup`
*   `Panel`
*   `PanelResizeHandle`

### `PanelGroup`

The `PanelGroup` component is the primary component within the react-resizable-panels package. It is responsible for managing the behavior of a group of resizable, dynamic panels within a layout. 

It acts as a wrapper around individual `Panel` components, providing a centralized control mechanism for resizing, maintaining the size and position of each panel, and arranging them accordingly:

```javascript
<PanelGroup ... >
  ...
</PanelGroup>
```

Essentially, the `panelGroup` component creates a flexible container layout with resizable panels that can be arranged either horizontally or vertically based on the specific needs of the application. It achieves this through the use of various props, which allow you to customize and configure various aspects of the layout. 

This includes the panels' directions and styles, resizing events triggered when the group layout changes, and a custom storage API for storing and retrieving details about the resizable panels' state, such as their size and position. 

Here is a list of some of the `PanelGroup` properties:

*   `direction`: Sets panel’s direction (horizontal, vertical)
*   `onLayout`: Triggers a callback in response to layout changes
*   `storage`: Sets a custom storage solution to save and retrieve panel states for persistent layouts

Feel free to explore the [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels) documentation for additional information about these properties.

### `Panel`

The `Panel` component is the fundamental building block for creating dynamic panel layouts with react-resizable-panels. Each panel represents a distinct section of the panel layout, which is often instantiated with a container component such as the `PanelGroup` component. Users can interact with, resize, and rearrange these panels as needed. 

`Panel` components are nested within `PanelGroup` container components and can accommodate a variety of content types, including text, images, forms, charts, and other React components, as its children. Below is a code example of a panel layout with a 2-row `PanelGroup`:

```javascript
<PanelGroup direction="horizontal">
  <Panel>Right Panel</Panel>
  <Panel>Left Panel</Panel>
</PanelGroup>
```

Just like `PanelGroup`, the `Panel` component provides props that enable you to customize the initial size, resizing constraints (such as minimum and maximum size limits), order, and event handlers that invoke callbacks upon resizing actions. 

Here is a list of some of the `Panel` properties:

*   `defaultSize`: Defines the panel's initial size
*   `maxSize`: Sets the maximum size limit
*   `minSize`: Sets the minimum size limit
*   `order`: Sets the panel’s sequence
*   `onResize`: Triggers a callback on resizing actions
*   `onCollapse`: Triggers a callback when panel collapses

Feel free to explore the [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels) documentation for more information about these properties.

### `PanelResizeHandle`

By default, `Panel` components aren't resizable. This is because they lack the "handlebar" that lets users grab and resize them horizontally or vertically. 

That's where the `PanelResizeHandle` component comes in. It adds these interactive handlebars to your dynamic panel layout, allowing users to adjust the size of individual panels. 

Typically, you'll nest the `PanelResizeHandle` component within a `PanelGroup`. Place it before or after a panel declaration to position the handlebars at the edges or corners of the panel:

```javascript
<PanelGroup direction="horizontal">
  <Panel defaultSize={30} minSize={20}>
    left
  </Panel>
  <PanelResizeHandle />
  <Panel minSize={30}>middle</Panel>
  <PanelResizeHandle />
  <Panel defaultSize={30} minSize={20}>
    right
  </Panel>
</PanelGroup>;
```

The `PanelResizeHandle` component provides various properties for customizing its behavior and appearance:

*   `hitAreaMargins`: Defines the margin around the handle for easier grabbing
*   `style`: Applies custom styles to the handle for visual branding or to match your UI
*   `disabled`: Disables the handle to prevent resizing for specific panels
*   `onDragging`: Integrates an event handler that triggers when the user drags the handle, allowing you to react to layout changes in real time

Additionally, the `PanelResizeHandle` component accepts an optional `children` property that customizes the handle's look and feel. This can be any arbitrary React element, i.e., any valid React element, such as JSX, or a custom component to render as the handle: ![Using A Custom Handlebar For The Panel Layout](https://blog.logrocket.com/wp-content/uploads/2024/03/rendering-custom-handlebar-panel-layout.gif) In the example above, we rendered the LogRocket starship logo icon as a custom handlebar for the panel layout.

### react-resizable-panels stats

*   GitHub stars: 3K+
*   License: MIT
*   npm weekly downloads: 53K+
*   Maintenance status: Constantly updated

### react-resizable-panels quick start

Integrating the react-resizable-panels package into your React application is relatively straightforward. You can start using it by running either of the following commands in your terminal, within the same directory as your application:

```bash
npm install react-resizable-panels
```

```yarn
yarn add react-resizable-panels
```

### react-resizable-panels usage

After installing the package, you can incorporate it into any of your project's components by importing the highlighted components at the module's top level, as demonstrated below:

```javascript
import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
```

Then, you can construct the panel layout according to your preferences:

```javascript
import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";

function App() {

  return (
    <>
      <div className="layout">
        <PanelGroup autoSaveId="test" direction="horizontal">
          <Panel defaultSize={25} minSize={20}>
            Right Panel
          </Panel>
          <PanelResizeHandle className="handle">
            {/* custom handlebar */}
            <img className="handleLogo" src="/log.png" alt="LogRocket Logo" />
          </PanelResizeHandle>
          <Panel minSize={20}>
            Left Panel
          </Panel>
        </PanelGroup>
      </div>
    </>
  );
}

export default App;
```

## react-resizable-layout

[react-resizable-layout](https://github.com/RyoSogawa/react-resizable-layout?tab=readme-ov-file) is another excellent tool for creating dynamic panel layouts in React. This package is a lightweight alternative to the react-resizable-panels package and offers the same functionalities. 

However, unlike react-resizable-panels, react-resizable-layout is headless, meaning it provides the functionality of a dynamic panel layout without any predefined UI or styles. In simpler terms, it gives you the core logic and behavior with the flexibility to build your preferred UI around it. The package exposes two key components: the `Resizable` component and the `useResizable` Hook. Both components serve as standalone building blocks and are used individually. This versatility allows you to select the one that best aligns with your preferences and development approach.

### `Resizable`

The `Resizable` component allows you to make any component resizable by wrapping it and making it its child component. However, instead of directly wrapping the component, it uses a render prop pattern. 

In this pattern, the component receives its children as an object and renders them using a function:

```javascript
<Resizable>
  {({ position, separatorProps }) => (
        ...
  )}
</Resizable>
```

The function receives an object parameter containing information about the current position of the resizable component and properties for the separator component through the `position` and `separatorProps` props. 

The render function typically comprises a wrapper element containing blocks of resizable components and a custom separator positioned between the blocks. The `position` value is set as inline styles for the nested blocks and the `separatorProps` are passed as props to the custom separator component:

```javascript
<Resizable>
  {({ position, separatorProps }) => (
    <div className="wrapper">
      <div className="left-block" style={{ width: position }} />
      <customSeparatorComponent {...separatorProps} />
      <div className="right-block" />
    </div>
  )}
</Resizable>
```

The `Resizable` component offers various props for customization, allowing you to control aspects such as the initial size of the component, minimum and maximum size limits, resize direction, and more. Below is a list of some of these props:

*   `axis`: Defines the resizing direction (horizontal, vertical, or both)
*   `initial`: Set the starting size of your component
*   `reverse`: Flips the resizing behavior (e.g., resize left instead of right)
*   `min` and `max`: Set size limits
*   `step`: Defines how much the resizing jumps per action

You can find additional information about these properties in the [react-resizable-layout](https://github.com/RyoSogawa/react-resizable-layout) repository.

### `useResizable`

The `useResizable` Hook offers similar functionality to the `Resizable` component. However, it allows you to separate concerns by encapsulating and managing the resizable logic within a React component:

```javascript
const Component = () => {
  const { position, separatorProps } = useResizable();

  return (
    <div className="wrapper">
      <div className="left-block" style={{ width: position }} />
      <YourSeparatorComponent {...separatorProps} />
      <div className="right-block" />
    </div>
  )
}
```

This approach lets you separate the resizable logic from the render function, making it modular and reusable across various components as needed. 

The `useResizable` Hook uses the same props as the `Resizable` component and is applied by passing them to the hook as properties of an object argument:

```javascript
const { position, separatorProps } = useResizable({
  axis: "y",
  initial: 20,
  step: 20,
});
```

You can explore more information about the `useResizable` Hook in the [react-resizable-layout](https://github.com/RyoSogawa/react-resizable-layout) repository.

### react-resizable-layout stats

*   GitHub stars: 54+
*   License: MIT
*   npm weekly downloads: 3k+
*   Maintenance status: The last commit was 4 months ago at the time of writing

### react-resizable-layout quick start

To integrate react-resizable-layout into your React application, you have to install the package as a dependency using the following command:

```yarn
npm i react-resizable-layout
```

### react-resizable-layout usage

After the installation is complete, you can start using the package by importing either of the `Resizable` or `useResizable` components and Hook at the top level of any component in your application, and put them to use using any of the highlighted methods in the previous sections:

```javascript
import Resizable from 'react-resizable-layout';

<Resizable axis={'x'}>
  {({ position, separatorProps }) => (
    <div className="wrapper">
      <div className="left-block" style={{ width: position }} />
      <YourSeparatorComponent {...separatorProps} />
      <div className="right-block" />
    </div>
  )}
</Resizable>
Or
import Resizable from 'react-resizable-layout';

const Component = () => {
  const { position, separatorProps } = useResizable({
    axis: 'x',
  })

  return (
    <div className="wrapper">
      <div className="left-block" style={{ width: position }} />
      <YourSeparatorComponent {...separatorProps} />
      <div className="right-block" />
    </div>
  )
}
```

## Other packages to consider

While react-resizable-panels and react-resizable-layout are popular choices, they represent just a fraction of the many packages available for crafting resizable layouts in the React ecosystem. This section introduces additional options you might consider when building dynamic panel layouts within your applications.

### React-Grid-Layout

First on the list is React-Grid-Layout. This open source package offers a myriad of features that give you the flexibility of creating draggable and resizable grid layouts, making it an ideal choice for building dashboards, content management systems (CMS), and dynamic user interface layouts.

#### Stats

*   GitHub stars: 19K+
*   npm weekly downloads: 500k+
*   License: MIT
*   Maintainance status: constantly maintained

#### Quick start

To use React-Grid-Layout in your React application, run the following command to install it as a dependency:

```yarn
npm i react-grid-layout
```

You can find additional information about the React-Grid-Layout in the [repository](https://github.com/react-grid-layout/react-grid-layout) and [documentation](https://react-grid-layout.github.io/react-grid-layout/examples/0-showcase.html).

### React Tabulator

[react-tabluator](https://github.com/ngduc/react-tabulator) is an open source table library based on the Tabulator library, a powerful JavaScript data grid and table library. The package allows you to manage complex tabular data within your React application, leveraging the extensive features provided by Tabular.

#### Stats

*   GitHub stars: 300+
*   npm weekly downloads: 4k+
*   License: MIT
*   Maintenance status: The last commit was in September 2023

#### Quick start

To get started with react-tabular, run the following command to install and integrate it with your React applications:

```yarn
npm i react-tabulator
```

### React Sortable HOC

[React Sortable HOC](https://clauderic.github.io/react-sortable-hoc/#/basic-configuration/basic-usage?_k=45cn9r) is a popular open source package for creating draggable and re-arrangeable lists in a React application. It uses a higher-order component approach, which makes it easy to add sorting functionality to existing components. 

Note: Before opting for the React Sortable HOC package, it is important to know that the package is no longer being maintained.

#### Stats

*   GitHub stars: 10K+
*   npm weekly downloads: 400K+
*   License: MIT
*   Maintainance status: The last commit was in May 2022

#### Quick start

To start with React Sortable HOC, run the following command to install it as a dependency in your project:

```yarn
npm i react-sortable-hoc
```

## Conclusion

In this article, we've outlined some of the best tools available in the React ecosystem for creating dynamic panel layouts. These tools provide robust solutions that can significantly enhance the user experience and streamline the interface design of your React application while maintaining efficiency and effectiveness. 

Many of the libraries mentioned here have garnered large user bases, as shown by their GitHub star counts and weekly npm downloads. This popularity speaks to their ability to improve productivity and meet the needs of developers working with React.

---

##Get set up with LogRocket's modern React error tracking in minutes:

1. Visit https://logrocket.com/signup/ to get an app ID.
2. Install LogRocket via NPM or script tag. `LogRocket.init()` must be called client-side, not server-side.

NPM:
```bash
$ npm i --save logrocket 

// Code:

import LogRocket from 'logrocket'; 
LogRocket.init('app/id');
```
Script Tag:
```javascript
Add to your HTML:

<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>
```

3.(Optional) Install plugins for deeper integrations with your stack:
*   Redux middleware
*   ngrx middleware
*   Vuex plugin

[Get started now](https://lp.logrocket.com/blg/signup)