Resizeable component

[matheusps]

Resizeable component

Accessible resizable panel groups and layouts with keyboard support. Benchmark.

Usage

<Resizeable>
  <ResizeablePanel>...</ResizeablePanel>
  <ResizeableHandle />
  <ResizeablePanel>...</ResizeablePanel>
</Resizeable>

Implementation

// index.ts
'use client'

export * from './resizable'
export * from './resizeable-handle'
export * from './resizeable-panel'

// resizeable.tsx
import { PanelGroup } from 'react-resizable-panels'

/**
 * @example
 * <Resizeable>
 *  <ResizeablePanel>...</ResizeablePanel>
 *  <ResizeableHandle />
 *  <ResizeablePanel>...</ResizeablePanel>
 * </Resizeable>
 */
export function Resizable(props: ResizableProps) {
  return <PanelGroup data-sl-resizeable {...props} />
}

export type ResizableProps = React.ComponentProps<typeof PanelGroup>

// resizeable-handle.tsx
import type { ComponentProps } from 'react'
import { PanelResizeHandle } from 'react-resizable-panels'

/**
 * @example
 * <Resizeable>
 *  <ResizeablePanel>...</ResizeablePanel>
 *  <ResizeableHandle />
 *  <ResizeablePanel>...</ResizeablePanel>
 * </Resizeable>
 */
export function ResizableHandle(props: ResizableHandleProps) {
  return <PanelResizeHandle data-sl-resizeable-handle {...props} />
}

export type ResizableHandleProps = ComponentProps<typeof PanelResizeHandle>

// resizeable-panel.tsx
import type { ComponentProps } from 'react'
import { Panel } from 'react-resizable-panels'

/**
 * @example
 * <Resizeable>
 *  <ResizeablePanel>...</ResizeablePanel>
 *  <ResizeableHandle />
 *  <ResizeablePanel>...</ResizeablePanel>
 * </Resizeable>
 */
export function ResizablePanel(props: ResizablePanelProps) {
  return <Panel data-sl-resizeable-panel {...props} />
}

export type ResizablePanelProps = ComponentProps<typeof Panel>

Styling

@layer sl-components {
  [data-sl-resizeable] {
    display: flex;
    width: 100%;
    height: 100vh;
  }

  [data-sl-resizeable-panel] {
    width: 100%;
    height: 100%;
  }

  [data-sl-resizeable-handle] {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    transition: background-color 150ms ease-in-out;
    background-color: var(--sl-color-gray-1);
    width: 0.125rem;
  }

  [data-sl-resizeable-handle][data-resize-handle-state='hover'] {
    background-color: var(--sl-color-gray-3);
  }

  [data-sl-resizeable-handle][data-resize-handle-state='drag'] {
    background-color: var(--sl-color-gray-6);
  }
}

[beatrizmilhomem]

That would be really nice to allow users on the Admin to customize table column widths and also for the future of the Sidebar.

[davicostalf]

No one has asked for this, so we are closing this issue for now.