---
name: "PageContainer"
mode: "component"
versionRequirements:
  - { name: "@ray-js/ray", version: "0.5.10" }
title: "PageContainer - Page container"
---

## PageContainer

> [VERSION] @ray-js/ray >= 0.5.10

### Description

Page container for popping up half-screen or full-screen content from the screen edge or bottom; supports mask, rounded corners, enter/exit animations, and lifecycle callbacks.

### Props

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `show` | `boolean` | No | `false` | Whether to show the container |
| `duration` | `number` | No | `300` | Animation duration, in milliseconds |
| `zIndex` | `number` | No | `100` | z-index level |
| `overlay` | `boolean` | No | `true` | Whether to show the mask |
| `position` | `"top" \| "bottom" \| "right" \| "center"` | No | `"bottom"` | Placement |
| `round` | `boolean` | No | `false` | Whether to show rounded corners |
| `overlayStyle` | `string \| any` | No | - | Custom mask style |
| `customStyle` | `string \| any` | No | - | Custom popup style |
| `onBeforeEnter` | `(event: any) => void` | No | - | Triggered before entering |
| `onEnter` | `(event: any) => void` | No | - | Triggered while entering |
| `onAfterEnter` | `(event: any) => void` | No | - | Triggered after entering |
| `onBeforeLeave` | `(event: any) => void` | No | - | Triggered before leaving |
| `onLeave` | `(event: any) => void` | No | - | Triggered while leaving |
| `onAfterLeave` | `(event: any) => void` | No | - | Triggered after leaving |
| `onClickOverlay` | `(event: any) => void` | No | - | Triggered when the mask is clicked |

### Examples

#### Basic usage

```tsx
import React, { useState } from 'react';
import { PageContainer, Button, View } from '@ray-js/ray';

export default function BasicPageContainer() {
  const [show, setShow] = useState(false);

  return (
    <View>
      <Button onClick={() => setShow(true)}>Show from top</Button>
      <PageContainer
        show={show}
        position="top"
        overlay={false}
        onClickOverlay={() => setShow(false)}
      >
        <View style={{ height: '200px', padding: '20px' }}>
          <Button onClick={() => setShow(false)}>Close</Button>
        </View>
      </PageContainer>
    </View>
  );
}
```

#### Pop up from the bottom with mask

```tsx
import React, { useState } from 'react';
import { PageContainer, Button, View, Text } from '@ray-js/ray';

export default function BottomPageContainer() {
  const [show, setShow] = useState(false);

  return (
    <View>
      <Button onClick={() => setShow(true)}>Open bottom sheet</Button>
      <PageContainer
        show={show}
        position="bottom"
        round
        overlay
        duration={300}
        onClickOverlay={() => setShow(false)}
      >
        <View
          style={{
            minHeight: '300rpx',
            padding: '40rpx',
            backgroundColor: '#fff',
          }}
        >
          <Text style={{ fontSize: '32rpx', marginBottom: '20rpx' }}>
            Bottom sheet content
          </Text>
          <Button onClick={() => setShow(false)}>Close</Button>
        </View>
      </PageContainer>
    </View>
  );
}
```

#### Custom styles and lifecycle

```tsx
import React, { useState } from 'react';
import { PageContainer, Button, View, Text } from '@ray-js/ray';

export default function LifecyclePageContainer() {
  const [show, setShow] = useState(false);

  return (
    <View>
      <Button onClick={() => setShow(true)}>Open custom popup</Button>
      <PageContainer
        show={show}
        position="bottom"
        round
        overlay
        zIndex={200}
        duration={400}
        overlayStyle={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
        customStyle={{ backgroundColor: '#f5f5f5' }}
        onBeforeEnter={() => console.log('Before enter')}
        onEnter={() => console.log('Entering')}
        onAfterEnter={() => console.log('After enter')}
        onBeforeLeave={() => console.log('Before leave')}
        onLeave={() => console.log('Leaving')}
        onAfterLeave={() => console.log('After leave')}
        onClickOverlay={() => setShow(false)}
      >
        <View style={{ padding: '40rpx', minHeight: '300rpx' }}>
          <Text style={{ fontSize: '32rpx' }}>Custom style popup</Text>
          <Button onClick={() => setShow(false)} style={{ marginTop: '20rpx' }}>
            Close
          </Button>
        </View>
      </PageContainer>
    </View>
  );
}
```