Leave Yamada UI a star

Star
Yamada UIYamada UIv1.6.4

Resizable

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

Source@yamada-ui/resizable

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.

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.

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={<MoveHorizontal />} />

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

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

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

    <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

PreviousReorderNextDockable