PageContainer

Requires:

@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
		No	-	Triggered before entering
		No	-	Triggered while entering
		No	-	Triggered after entering
		No	-	Triggered before leaving
		No	-	Triggered while leaving
		No	-	Triggered after leaving
		No	-	Triggered when the mask is clicked

Valid Values

`position`

Value	Description	Since
`top`	Slide in from the top	-
`bottom`	Slide in from the bottom	-
`right`	Slide in from the right	-
`center`	Display in the center of the screen	-

Examples

Basic usage

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

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

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>
  );
}