Overflow Container

Last updated: 2.2.0 (02/02/2024) | Added: 2.2.0

The Overflow Container allows its children content to scroll freely within a set parent's boundaries. By default, this container will only scroll vertically and will grow to 100% of its parent's width and height.

Usage

import { OverflowContainer } from "@valence-ui/core";

function MyComponent() { 
    return ( 
        <OverflowContainer
            direction="vertical"
            width="100%"
            height="100%"
        >
            // Container children...
        </OverflowContainer>
    )
}

---

Props

Extends GenericProps.

Property	Type	Description
direction	OverflowDirection	The direction the container allows its inner content to scroll. Defaults to "vertical".
width	CSSProperties["width"]	The width of the container.
height	CSSProperties["height"]	The height of the container.
innerProps	FlexProps	Optional props to pass to the inner flex component.

OverflowDirection

type OverflowDirection = "horizontal" | "vertical" | "both" | "none";