Resizable

Resizable is accessible resizable panel groups and layouts with keyboard support.

Import

import {
  Resizable,
  ResizableItem,
  ResizableTrigger,
  ResizableTriggerIcon,
} from "@yamada-ui/react"

Copied!

Resizable: A wrapper component that controls child elements (ResizableItem).
ResizableItem: A size-adjustable component.
ResizableTrigger: A component that separates ResizableItem.
ResizableTriggerIcon: A component for the icon used in ResizableTrigger.

Usage

Editable example

<Resizable h="md" rounded="md" borderWidth="1px">
  <ResizableItem as={Center}>One</ResizableItem>

  <ResizableTrigger />

  <ResizableItem as={Center}>Two</ResizableItem>
</Resizable>

Copied!

Change Variants

Editable example

<VStack>
  <Resizable h="md" rounded="md" borderWidth="1px">
    <ResizableItem as={Center}>One</ResizableItem>

    <ResizableTrigger />

    <ResizableItem as={Center}>Two</ResizableItem>
  </Resizable>

  <Resizable variant="spacer" h="md">
    <ResizableItem as={Center} rounded="md" borderWidth="1px">
      One
    </ResizableItem>

    <ResizableTrigger />

    <ResizableItem as={Center} rounded="md" borderWidth="1px">
      Two
    </ResizableItem>
  </Resizable>
</VStack>

Copied!

Change Color Scheme

Editable example

<VStack>
  <Resizable variant="spacer" colorScheme="primary" h="md">
    <ResizableItem as={Center} rounded="md" borderWidth="1px">
      One
    </ResizableItem>

    <ResizableTrigger />

    <ResizableItem as={Center} rounded="md" borderWidth="1px">
      Two
    </ResizableItem>
  </Resizable>

  <Resizable variant="spacer" colorScheme="red" h="md">
    <ResizableItem as={Center} rounded="md" borderWidth="1px">
      One
    </ResizableItem>

    <ResizableTrigger />

    <ResizableItem as={Center} rounded="md" borderWidth="1px">
      Two
    </ResizableItem>
  </Resizable>
</VStack>

Copied!

Change Direction

To change the direction, set direction to either horizontal or vertical. By default, horizontal is set.

Editable example

<VStack>
  <Resizable direction="horizontal" h="md" rounded="md" borderWidth="1px">
    <ResizableItem as={Center}>One</ResizableItem>

    <ResizableTrigger />

    <ResizableItem as={Center}>Two</ResizableItem>
  </Resizable>

  <Resizable direction="vertical" h="md" rounded="md" borderWidth="1px">
    <ResizableItem as={Center}>One</ResizableItem>

    <ResizableTrigger />

    <ResizableItem as={Center}>Two</ResizableItem>
  </Resizable>
</VStack>

Copied!

Set Default Values

To set default values, assign a numerical value to defaultSize.

Editable example

<Resizable h="md" rounded="md" borderWidth="1px">
  <ResizableItem as={Center} defaultSize={30}>
    One
  </ResizableItem>

  <ResizableTrigger />

  <ResizableItem as={Center}>Two</ResizableItem>
</Resizable>

Copied!

Set Minimum and Maximum Values

To set minimum and maximum values, assign a numerical value to minSize or maxSize.

Editable example

<Resizable h="md" rounded="md" borderWidth="1px">
  <ResizableItem as={Center} minSize={30} maxSize={70}>
    One
  </ResizableItem>

  <ResizableTrigger />

  <ResizableItem as={Center}>Two</ResizableItem>
</Resizable>

Copied!

Set Keyboard Step Values

To set keyboard step values, assign a numerical value to keyboardStep.

Editable example

<Resizable h="md" rounded="md" borderWidth="1px" keyboardStep={25}>
  <ResizableItem as={Center}>One</ResizableItem>

  <ResizableTrigger />

  <ResizableItem as={Center}>Two</ResizableItem>
</Resizable>

Copied!

Save Values

To save values, set a key for saving to local storage in storageKey.

When saving values to local storage or similar, you must set an id on ResizableItem to associate each saved value with the ResizableItem.

If you dynamically mount ResizableItem, you need to set a numerical value to order to determine the order of the items.

Editable example

const [showLeft, showLeftControls] = useBoolean(true)
const [showRight, showRightControls] = useBoolean(true)

return (
  <VStack>
    <Resizable h="md" rounded="md" borderWidth="1px" storageKey="persistence">
      <ResizableItem as={Center} id="one">
        One
      </ResizableItem>

      <ResizableTrigger />

      <ResizableItem as={Center} id="two">
        Two
      </ResizableItem>
    </Resizable>

    <Wrap gap="md">
      <Button onClick={showLeftControls.toggle}>
        {showLeft ? "Hidden" : "Show"} Left
      </Button>
      <Button onClick={showRightControls.toggle}>
        {showRight ? "Hidden" : "Show"} Right
      </Button>
    </Wrap>

    <Resizable h="md" rounded="md" borderWidth="1px" storageKey="conditional">
      {showLeft ? (
        <>
          <ResizableItem as={Center} id="left" minSize={10} order={1}>
            Left
          </ResizableItem>

          <ResizableTrigger />
        </>
      ) : null}

      <ResizableItem as={Center} id="middle" minSize={10} order={2}>
        Middle
      </ResizableItem>

      {showRight ? (
        <>
          <ResizableTrigger />

          <ResizableItem as={Center} id="right" minSize={10} order={3}>
            Right
          </ResizableItem>
        </>
      ) : null}
    </Resizable>
  </>
)

Copied!

Save Values to `cookies`

To save values to cookies, set getItem and setItem in storage.

This is an effective approach for sites rendered on the server side, such as with Next.js.

Editable example

const storage: ResizableStorage = useMemo(
  () => ({
    getItem: (key) => {
      const match = document.cookie.match(new RegExp(`(^| )${key}=([^;]+)`))

      return match ? match[2] : null
    },
    setItem: (key, value) => {
      document.cookie = `${key}=${value}; max-age=31536000; path=/`
    },
  }),
  [],
)

return (
  <Resizable
    h="md"
    rounded="md"
    borderWidth="1px"
    storageKey="persistence"
    storage={storage}
  >
    <ResizableItem as={Center} id="one">
      One
    </ResizableItem>

    <ResizableTrigger />

    <ResizableItem as={Center} id="two">
      Two
    </ResizableItem>
  </Resizable>
)

Copied!

Enable Collapsing

To enable collapsing, set collapsible to true.

Specify the minimum value before collapsing with minSize, and the value when collapsed with collapsedSize.

Editable example

<VStack>
  <Resizable h="md" rounded="md" borderWidth="1px">
    <ResizableItem
      as={Center}
      collapsedSize={10}
      collapsible
      defaultSize={20}
      minSize={20}
      maxSize={30}
      onCollapse={() => {
        console.log("collapsed item")
      }}
      onExpand={() => {
        console.log("expand item")
      }}
    >
      One
    </ResizableItem>

    <ResizableTrigger />

    <ResizableItem as={Center}>Two</ResizableItem>
  </Resizable>

  <Resizable direction="vertical" h="md" rounded="md" borderWidth="1px">
    <ResizableItem
      as={Center}
      collapsedSize={10}
      collapsible
      defaultSize={25}
      minSize={25}
      maxSize={30}
      onCollapse={() => {
        console.log("collapsed item")
      }}
      onExpand={() => {
        console.log("expand item")
      }}
    >
      One
    </ResizableItem>

    <ResizableTrigger />

    <ResizableItem as={Center}>Two</ResizableItem>
  </Resizable>
</VStack>

Copied!

Add Icons

To add icons, set a ReactElement to icon.

Editable example

<VStack>
  <Resizable h="md" rounded="md" borderWidth="1px">
    <ResizableItem as={Center}>One</ResizableItem>

    <ResizableTrigger icon={<ResizableTriggerIcon />} />

    <ResizableItem as={Center}>Two</ResizableItem>
  </Resizable>

  <Resizable direction="vertical" variant="spacer" h="md">
    <ResizableItem as={Center} rounded="md" borderWidth="1px">
      One
    </ResizableItem>

    <ResizableTrigger icon={<ResizableTriggerIcon />} />

    <ResizableItem as={Center} rounded="md" borderWidth="1px">
      Two
    </ResizableItem>
  </Resizable>
</VStack>

Copied!

Customize Icons

Editable example

<VStack>
  <Resizable h="md" rounded="md" borderWidth="1px">
    <ResizableItem as={Center}>One</ResizableItem>

    <ResizableTrigger icon={<MoveHorizontalIcon />} />

    <ResizableItem as={Center}>Two</ResizableItem>
  </Resizable>

  <Resizable direction="vertical" h="md" rounded="md" borderWidth="1px">
    <ResizableItem as={Center}>One</ResizableItem>

    <ResizableTrigger icon={<MoveHorizontalIcon />} />

    <ResizableItem as={Center}>Two</ResizableItem>
  </Resizable>
</VStack>

Copied!

Nested Structure

Editable example

<VStack>
  <Resizable h="md" rounded="md" borderWidth="1px">
    <ResizableItem as={Center}>Left</ResizableItem>

    <ResizableTrigger />

    <ResizableItem>
      <Resizable direction="vertical">
        <ResizableItem as={Center}>Top</ResizableItem>

        <ResizableTrigger />

        <ResizableItem as={Center}>Bottom</ResizableItem>
      </Resizable>
    </ResizableItem>
  </Resizable>

  <Resizable direction="vertical" h="md" rounded="md" borderWidth="1px">
    <ResizableItem as={Center}>Top</ResizableItem>

    <ResizableTrigger />

    <ResizableItem>
      <Resizable>
        <ResizableItem as={Center}>Left</ResizableItem>

        <ResizableTrigger />

        <ResizableItem as={Center}>Right</ResizableItem>
      </Resizable>
    </ResizableItem>
  </Resizable>
</VStack>

Copied!

Disable

To disable, set isDisabled to true. You can also disable individually by setting it on ResizableTrigger.

Editable example

<VStack>
  <Resizable isDisabled h="md" rounded="md" borderWidth="1px">
    <ResizableItem as={Center}>One</ResizableItem>

    <ResizableTrigger />

    <ResizableItem as={Center}>Two</ResizableItem>

    <ResizableTrigger />

    <ResizableItem as={Center}>Three</ResizableItem>
  </Resizable>

  <Resizable h="md" rounded="md" borderWidth="1px">
    <ResizableItem as={Center}>One</ResizableItem>

    <ResizableTrigger isDisabled />

    <ResizableItem as={Center}>Two</ResizableItem>

    <ResizableTrigger />

    <ResizableItem as={Center}>Three</ResizableItem>
  </Resizable>
</VStack>

Copied!

Handle Resize Events

If you want to handle resize events, use onResize. onResize provides the changed size and the previous size.

Editable example

<Resizable h="md" rounded="md" borderWidth="1px">
  <ResizableItem
    as={Center}
    onResize={(size, prevSize) => {
      console.log("resized", size, prevSize)
    }}
  >
    One
  </ResizableItem>

  <ResizableTrigger />

  <ResizableItem as={Center}>Two</ResizableItem>
</Resizable>

Copied!

Control

Editable example

const controlRef = useRef<ResizableItemControl>(null)

return (
  <VStack>
    <Wrap gap="md">
      <Button
        onClick={() => {
          if (controlRef.current) controlRef.current.collapse()
        }}
      >
        Collapse "one"
      </Button>

      <Button
        onClick={() => {
          if (controlRef.current) controlRef.current.expand()
        }}
      >
        Expand "one"
      </Button>
      <Button
        onClick={() => {
          if (controlRef.current) controlRef.current.resize(30)
        }}
      >
        Resize "one" to 30
      </Button>

      <Button
        onClick={() => {
          if (controlRef.current) controlRef.current.resize(50)
        }}
      >
        Resize "one" to 50
      </Button>
    </Wrap>

    <Resizable h="md" rounded="md" borderWidth="1px">
      <ResizableItem
        as={Center}
        controlRef={controlRef}
        collapsible
        collapsedSize={15}
        minSize={30}
        maxSize={50}
      >
        One
      </ResizableItem>

      <ResizableTrigger />

      <ResizableItem as={Center}>Two</ResizableItem>
    </Resizable>
  </VStack>
)

Copied!

Edit this page on GitHub

PreviousReorder NextDockable

Resizable

Usage

Change Variants

Change Color Scheme

Change Direction

Set Default Values

Set Minimum and Maximum Values

Set Keyboard Step Values

Save Values

Save Values to cookies

Enable Collapsing

Add Icons

Customize Icons

Nested Structure

Disable

Handle Resize Events

Control

Save Values to `cookies`