Page Container

Last updated: 3.0.0 (04/07/2024)

The Page Container is a convenience component that combines an Overflow Container with a Flex Center to create a standard page layout. It provides a scrollable area with centered, width-constrained content.

Usage

import { PageContainer, Text, Title } from "@valence-ui/core";

function MyPage() { 
    return ( 
        <PageContainer>
            <Title>My Page</Title>
            <Text>
                This content is centered and constrained to a maximum width.
            </Text>
        </PageContainer>
    )
}

Custom inner width

By default, the inner content is constrained to min(100%, 700px). You can customize this:

import { PageContainer, Text } from "@valence-ui/core";

function MyPage() { 
    return ( 
        <PageContainer
            innerWidth="min(100%, 1000px)"
        >
            <Text>
                Wider content area!
            </Text>
        </PageContainer>
    )
}

Exempt content

The exemptContent prop allows you to add content that sits outside the centered area, useful for full-width headers or banners:

import { PageContainer, Header, Text, Title } from "@valence-ui/core";

function MyPage() { 
    return ( 
        <PageContainer
            exemptContent={
                <Header>
                    <Title>Full-width Header</Title>
                </Header>
            }
        >
            <Text>
                This content is centered below the header.
            </Text>
        </PageContainer>
    )
}

Custom overflow container props

You can pass props to the underlying Overflow Container:

import { PageContainer, Text } from "@valence-ui/core";

function MyPage() { 
    return ( 
        <PageContainer
            overflowContainerProps={{
                height: "50vh",
                direction: "vertical",
            }}
        >
            <Text>
                Custom scroll container!
            </Text>
        </PageContainer>
    )
}

---

Props

Extends FlexCenterProps.

Property	Type	Description
exemptContent	ReactNode	Content to render outside the centered area, above the main content.
overflowContainerProps	OverflowContainerProps	Optional props to pass to the Overflow Container.