Resizable

Resizable is a compound component and expects Resizable.Item and Resizable.Handle to be rendered at its top level. You can render any number of items combined with handles within the same Resizable, and they will take equal width within their parent by default.

Resizable doesn't automatically define the height, so you can use any CSS value to define it with the height property or let it stretch based on its content.

<Resizable height="200px">
  <Resizable.Item>
    <View backgroundColor="neutral-faded" borderRadius="small" height="100%" />
  </Resizable.Item>
  <Resizable.Handle />
  <Resizable.Item>
    <View backgroundColor="neutral-faded" borderRadius="small" height="100%" />
  </Resizable.Item>
  <Resizable.Handle />
  <Resizable.Item>
    <View backgroundColor="neutral-faded" borderRadius="small" height="100%" />
  </Resizable.Item>
</Resizable>

Set the panels' direction to column to stack the panels vertically.

<Resizable height="200px" direction="column">
  <Resizable.Item>
    <View backgroundColor="neutral-faded" borderRadius="small" height="100%" />
  </Resizable.Item>
  <Resizable.Handle />
  <Resizable.Item>
    <View backgroundColor="neutral-faded" borderRadius="small" height="100%" />
  </Resizable.Item>
  <Resizable.Handle />
  <Resizable.Item>
    <View backgroundColor="neutral-faded" borderRadius="small" height="100%" />
  </Resizable.Item>
</Resizable>

All panels take equal size by default and are fully expandable/collapsible. You can define their minSize, maxSize, and defaultSize with px values.

<Resizable height="200px">
  <Resizable.Item minSize="50px" maxSize="200px" defaultSize="100px">
    <View backgroundColor="neutral-faded" borderRadius="small" height="100%" />
  </Resizable.Item>
  <Resizable.Handle />
  <Resizable.Item>
    <View backgroundColor="neutral-faded" borderRadius="small" height="100%" />
  </Resizable.Item>
</Resizable>

You can nest multiple Resizable components into each other. For example, you can use a horizontal Resizable and render a vertical one inside one of the columns.

<Resizable height="200px">
  <Resizable.Item>
    <View backgroundColor="neutral-faded" borderRadius="small" height="100%" />
  </Resizable.Item>
  <Resizable.Handle />
  <Resizable.Item>
    <Resizable height="100%" direction="column">
      <Resizable.Item>
        <View
          backgroundColor="neutral-faded"
          borderRadius="small"
          height="100%"
        />
      </Resizable.Item>
      <Resizable.Handle />
      <Resizable.Item>
        <View
          backgroundColor="neutral-faded"
          borderRadius="small"
          height="100%"
        />
      </Resizable.Item>
    </Resizable>
  </Resizable.Item>
</Resizable>

You can render a custom Resizable.Handle using its children property and passing its attributes to another focusable element.

<Resizable height="200px">
  <Resizable.Item>
    <View backgroundColor="neutral-faded" borderRadius="small" height="100%" />
  </Resizable.Item>
  <Resizable.Handle>
    {(attributes) => (
      <View
        padding={2}
        align="center"
        justify="center"
        backgroundColor="primary-faded"
        height="100%"
        borderRadius="small"
      >
        <Button attributes={attributes} type="button">
          Drag me
        </Button>
      </View>
    )}
  </Resizable.Handle>
  <Resizable.Item>
    <View backgroundColor="neutral-faded" borderRadius="small" height="100%" />
  </Resizable.Item>
</Resizable>

• ArrowLeft - move the focused handle inside a row Resizable to the left
• ArrowRight - move the focused handle inside a row Resizable to the right
• ArrowUp - move the focused handle inside a column Resizable higher
• ArrowDown - move the focused handle inside a column Resizable lower