Resizable

SolidJS components for building resizable panels and splitters.

Features Section titled Features

• Intersectable resize handles for bidirectional resizing
• Alt key resize mode
• Keyboard resizing
• Optional management of the cursor style while resizing
• Full control from userland with access to the state, resize and collapse functions

Installation Section titled Installation

npm install @corvu/resizable

The resizable is also included in the main corvu package under corvu/resizable.

Usage Section titled Usage

import Resizable from '@corvu/resizable' // 'corvu/resizable'
// or
// import { Root, Panel, Handle } from '@corvu/resizable'

Anatomy Section titled Anatomy

<Resizable>
<Resizable.Panel />
<Resizable.Handle />
<Resizable.Panel />
</Resizable>

Vertical orientation Section titled Vertical orientation

The resizable primitive is aligned horizontally per default. To make it vertical, set orientation to vertical:

<Resizable orientation="vertical">
<Resizable.Panel />
<Resizable.Handle />
<Resizable.Panel />
</Resizable>

Preventing panel overflow Section titled Preventing panel overflow

By default, the panels could overflow if the content doesn’t fit. You should prevent this by setting overflow: hidden on <Panel /> components.

This isn’t the default behavior because panels that nest panels shouldn’t have their overflow hidden as it breaks intersecting handles.

Alt key resizing Section titled Alt key resizing

Resizing while holding down the Alt key changes the size of a panel from both sides. The implementation attempts to replicate the behavior on macOS and in VS Code:

View code

You can also disable this behavior by setting altKey={false} on the <Handle /> component. Or you can make this the default and only way to resize on a Handle by setting altKey="only".

Nested resizables Section titled Nested resizables

You can nest resizables to create more complex layouts. Resize handles automatically detect intersecting handles and allow resizing in both directions at once. You can disable these intersections if you’d like to. Check out the Handle API for more information.

Persistent layout Section titled Persistent layout

corvu itself doesn’t provide a first party way to persist the layout of resizable panels. However, you can achieve this easily with something like the makePersisted utility from Solid Primitives:

import { createSignal } from 'solid-js'
import { makePersisted } from '@solid-primitives/storage'
import Resizable from '@corvu/resizable'

const PersistentResizable = () => {
const [sizes, setSizes] = makePersisted(createSignal<number[]>([]), {
  name: 'resizable-sizes'
})

return (
  <Resizable sizes={sizes()} onSizesChange={setSizes}>
    <Resizable.Panel />
    <Resizable.Handle />
    <Resizable.Panel />
  </Resizable>
)
}

Edit the layout below and refresh the page to see how the panel sizes persist.

Collapsible panel Section titled Collapsible panel

A Panel can be configured to be collapsible by setting the collapsible prop to true. Per default, this will collapse the panel to a size of 0, but you can define the collapsible size with the collapsedSize property. It’s important that you configure a minSize or it’ll never collapse as it can shrink to 0 normally.

Additionally, there is the collapseThreshold property that you can use to define how much the user has to “overdrag” before the panel collapses. Default is 0.05.

Here, the left Panel is collapsible with minSize={0.3} and collapsedSize={0.15}:

Userland Section titled Userland

The resizable primitive provides many ways to interact and get information about its state from userland. There are resize(), collapse() and expand() functions on both the <Root /> and <Panel /> components that allow you to alter panel state from userland. Please have a look at the API documentation below!

Hoisting the context Section titled Hoisting the context

A common use case is to have expand or collapse buttons outside of your resizable layout, in a toolbar for example. There are two common and easy ways to get access to the context outside of <Resizable />:

One approach is to use the as prop to provide a custom component where you can access the context:

const ResizableWrapper = (props: object) => {
const context = Resizable.useContext()
// Access to the context outside of <Resizable />

return <div {...props} />
}

const Component = () => {
return (
  <Resizable as={ResizableWrapper}>
    <Resizable.Panel />
    <Resizable.Handle />
    <Resizable.Panel />
  </Resizable>
)
}

Here is an example that uses this approach:

The other approach is to use a signal to hoist the context:

const Component = () => {
const [resizableContext, setResizableContext] =
  createSignal<ContextValue | null>(null)
// Access to the context outside of <Resizable />
return (
  <Resizable>
    {() => {
      const context = Resizable.useContext()
      setResizableContext(context)

      return (
        <>
          <Resizable.Panel />
          <Resizable.Handle />
          <Resizable.Panel />
        </>
      )
    }}
  </Resizable>
)
}

Persistent layout with SSR Section titled Persistent layout with SSR

To avoid content shift when using server side rendering, we have to define the initialSize property on every <Panel /> component. This makes sure that the panel renders with the correct size on the server. We can use the makePersisted utility with the cookieStorage from Solid Primitives:

import { createSignal } from 'solid-js'
import { cookieStorage, makePersisted } from '@solid-primitives/storage'
import Resizable from '@corvu/resizable'

const SSRPersistentResizable = () => {
const [sizes, setSizes] = makePersisted(createSignal<number[]>([]), {
  storage: cookieStorage,
  name: 'resizable-sizes'
})

return (
  <Resizable sizes={sizes()} onSizesChange={setSizes}>
    <Resizable.Panel initialSize={sizes()[0] ?? 0.5} />
    <Resizable.Handle />
    <Resizable.Panel initialSize={sizes()[1] ?? 0.5} />
  </Resizable>
)
}

Accessibility Section titled Accessibility

Adheres to the Window Splitter WAI-ARIA design pattern.

Ensuring handles are accessible Section titled Ensuring handles are accessible

<Handle /> components already include required and supported aria attributes for the separator role. Additionally, you should define a label that describes their purpose. This can be done by setting the aria-label attribute:

<Resizable.Handle aria-label="Resize panels" />

Keyboard navigation Section titled Keyboard navigation

Handles can be resized with the keyboard. Here is a list of all implemented keyboard shortcuts:

Pressing shift while resizing with arrow keys will expand/contract the panel fully.

API reference Section titled API reference

type Size = `${number}px` | number