gfazioli / mantine-split-pane

A React component that manages split panes allows users to divide and resize content areas within a layout efficiently.

Mantine Split pane Component

---

Overview

This component is created on top of the Mantine library.

Utilizing Mantine UI, enables users to create a flexible layout with resizable split panes. It supports both vertical and horizontal splitting, allowing the arrangement of content in various configurations. The component seamlessly handles nested split panes, enabling complex layouts with ease. With intuitive resizing functionality, users can adjust the size of each pane effortlessly. This component provides a responsive and user-friendly interface for organizing and displaying content in a way that best suits the application's needs.

Installation

npm install @gfazioli/mantine-split-pane

or

yarn add @gfazioli/mantine-split-pane

After installation import package styles at the root of your application:

import '@gfazioli/mantine-split-pane/styles.css';

Usage

import { Split } from '@gfazioli/mantine-split-pane';
import { Paper } from '@mantine/core';

function Demo() {
  return (
    <Split>
      <Split.Pane>
        <Paper withBorder w="100%" mih="100%">
          <h1>Pane 1</h1>
        </Paper>
      </Split.Pane>

      <Split.Pane>
        <Paper withBorder>
          <h1>Pane 2</h1>
        </Paper>
      </Split.Pane>
    </Split>
  );
}

mantine-split-pane's Issues

Collapse/Expand Split.Pane with Double Click of Pane Gutter

Hi...great work on mantine-split-pane! Very nice codebase.

I've been testing it in our application and it is very promising. I've looked at the documentation available, and saw the secton on "Reset with Double Click". I'm trying to set up a 3 pane layout with a main center pane and then right and left panes that can be expanded or collapsed by clicking the pane gutter. I've attempted to use minWdith, initialWidth, and maxWdith to make it work. The double click collapses the pane, but does not restore to either the previous width or the initialWidth.

Is it possible to enable double click to collapse to 0 width and then on next double click expand to initialWidth?

Not sure if you're looking at feature requests yet, but this would be useful (in my opinion.)