Source: https://app-studio-6167b.web.app/docs/Resizable

@app-studio/components

# Resizable

A flexible container that allows users to resize its content areas by dragging adjustable dividers.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable.tsx)

## Import

```ts
import { Resizable } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { Resizable } from '@app-studio/components';
import { View } from 'app-studio';
import { Text } from 'app-studio';
import { Button } from '@app-studio/components';
import { Horizontal } from 'app-studio';

export const ControlledResizable = () => {
  const [sizes, setSizes] = useState([33.33, 33.33, 33.33]);

  const handleSizesChange = (newSizes: number[]) => {
    setSizes(newSizes);
  };

  const resetSizes = () => {
    setSizes([33.33, 33.33, 33.33]);
  };

  const maximizeFirst = () => {
    setSizes([60, 20, 20]);
  };

  const maximizeMiddle = () => {
    setSizes([20, 60, 20]);
  };

  const maximizeLast = () => {
    setSizes([20, 20, 60]);
  };

  return (
    <View>
      <Horizontal gap={10} marginBottom={16}>
        <Button onClick={resetSizes}>Reset</Button>
        <Button onClick={maximizeFirst}>Maximize First</Button>
        <Button onClick={maximizeMiddle}>Maximize Middle</Button>
        <Button onClick={maximizeLast}>Maximize Last</Button>
      </Horizontal>

      <Text marginBottom={10}>
        Current sizes: [{sizes.map((size) => Math.round(size)).join('%, ')}%]
      </Text>

      <View
        height="300px"
        width="100%"
        border="1px solid #e2e8f0"
        borderRadius="8px"
        overflow="hidden"
      >
        <Resizable defaultSizes={sizes} onSizesChange={handleSizesChange}>
          <Resizable.Panel id="panel1" defaultSize={`${sizes[0]}%`}>
            <View padding="16px" height="100%" backgroundColor="color-blue-50">
              <Text fontWeight="bold" marginBottom="8px">
                Panel 1
              </Text>
              <Text>Size: {Math.round(sizes[0])}%</Text>
            </View>
          </Resizable.Panel>

          <Resizable.Handle id="handle1" withVisualIndicator />

          <Resizable.Panel id="panel2" defaultSize={`${sizes[1]}%`}>
            <View padding="16px" height="100%" backgroundColor="color-green-50">
              <Text fontWeight="bold" marginBottom="8px">
                Panel 2
              </Text>
              <Text>Size: {Math.round(sizes[1])}%</Text>
            </View>
          </Resizable.Panel>

          <Resizable.Handle id="handle2" withVisualIndicator />

          <Resizable.Panel id="panel3" defaultSize={`${sizes[2]}%`}>
            <View
              padding="16px"
              height="100%"
              backgroundColor="color-purple-50"
            >
              <Text fontWeight="bold" marginBottom="8px">
                Panel 3
              </Text>
              <Text>Size: {Math.round(sizes[2])}%</Text>
            </View>
          </Resizable.Panel>
        </Resizable>
      </View>
    </View>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Resizable**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L13) |
| `orientation` | `Orientation` `"horizontal"``"vertical"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L15) |
| `size` | `Size` `"sm"``"md"``"lg"` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L17) |
| `variant` | `Variant` `"default"``"subtle"``"prominent"` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L19) |
| `defaultSizes` | `(string \| number)[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L21) |
| `onSizesChange` | `((sizes: number[]) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L23) |
| `minSize` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L25) |
| `maxSize` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L27) |
| `collapsible` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L29) |
| `autoSaveId` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L31) |
| `storage` | `ResizableStorage` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L33) |
| `keyboardResizeBy` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L35) |
| `views` | `ResizableStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L37) |

### Resizable.Panel

**Resizable.Panel**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L42) |
| `id` Required | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L44) |
| `defaultSize` | `string \| number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L46) |
| `minSize` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L48) |
| `maxSize` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L50) |
| `collapsible` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L52) |
| `defaultCollapsed` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L54) |
| `onCollapseChange` | `((collapsed: boolean) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L56) |
| `views` | `{ panel?: ViewProps; collapsedPanel?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L58) |

### Resizable.Handle

**Resizable.Handle**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `id` Required | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L66) |
| `position` | `HandlePosition` | `—` | Position of the element or notification.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L68) |
| `disabled` | `boolean` | `—` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L70) |
| `withVisualIndicator` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L72) |
| `withCollapseButton` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L74) |
| `collapseTarget` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L76) |
| `views` | `{ handle?: ViewProps; handleIcon?: ViewProps; collapseIcon?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L78) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.