React Spaces

View on GitHub

A few examples showing the main features of React Spaces. Note: background colours and text have been added to the live examples in addition to the markup shown.

• Anchored spaces
• Resizable spaces
• Nested spaces
• Scrollable spaces
• Stacked spaces
• Layered spaces
• Sizing information

Anchored spaces

Anchored spaces provide spaces which can be anchored to the side of a container space. For example, a <Left /> space might be used for a left sidebar and a <Top /> space might be used for a fixed heading or toolbar.

<Space.Fixed height={400}>
    <Space.Left size="20%" />
    <Space.Fill />
    <Space.Right size="20%" />
</Space.Fixed>

<Space.Fixed height={400}>
    <Space.Top size="20%" />
    <Space.Fill />
    <Space.Bottom size="20%" />
</Space.Fixed>

Resizable spaces

Resizable spaces allow the space to be resized by dragging with the mouse. There are resizable variations of the spaces above called <LeftResizable />, <RightResizable />, <TopResizable />, and <BottomResizable />.

The size specified is the initial width/height of the space.

<Space.Fixed height={400}>
    <Space.LeftResizable size="20%" />
    <Space.Fill />
    <Space.RightResizable size="20%" />
</Space.Fixed>

<Space.Fixed height={400}>
    <Space.TopResizable size="20%" />
    <Space.Fill />
    <Space.BottomResizable size="20%" />
</Space.Fixed>

Additional properties can be specified to constrain the resizing:

<Space.Fixed height={400}>
    <Space.LeftResizable size="20%" minimumSize={50} maximumSize={150} />
    <Space.Fill />
    <Space.RightResizable size="20%" minimumSize={50} maximumSize={150} />
</Space.Fixed>

Nested spaces

Spaces can be nested within other spaces to create complex layouts.

<Space.Fixed height={400}>
    <Space.TopResizable size="25%" />
    <Space.Fill>
        <Space.LeftResizable size="25%" />
        <Space.Fill />
        <Space.RightResizable size="25%" />
    </Space.Fill>
    <Space.BottomResizable size="25%" />
</Space.Fixed>

<Space.Fixed height={400}>
    <Space.LeftResizable size="25%" />
    <Space.Fill>
        <Space.TopResizable size="25%" />
        <Space.Fill />
        <Space.BottomResizable size="25%" />
    </Space.Fill>
    <Space.RightResizable size="25%" />
</Space.Fixed>

Scrollable spaces

By default, all spaces hide content that overflows the space. To make a particular space scrollable, set the scrollable property to true. The space will then be scrollable horizontally or vertically if the content overflows the space.

<Space.Fixed height={400}>
    <Space.LeftResizable size="20%" />
    <Space.Fill scrollable={true} />
</Space.Fixed>

Stacked spaces

Anchored spaces can be stacked to provide more than one space on each side. To guarantee ordering from the outside of the container / parent space, you should specify an order.

<Space.Fixed height={400}>
    <Space.LeftResizable size="10%" order={1} />
    <Space.LeftResizable size="10%" order={2} />
    <Space.Fill />
    <Space.RightResizable size="10%" order={2} />
    <Space.RightResizable size="10%" order={1} />
</Space.Fixed>

Layered spaces

Layers allow spaces to be layered within a parent space enabling spaces to float over other spaces. This can be useful for positioning elements like floating drawers.

const [ lsize, setLSize ] = React.useState("20%");
const [ rsize, setRSize ] = React.useState("20%");

return (
    <Space.Fixed>

        <Space.Layer zIndex={0}>
            <Space.TopResizable size="20%" />
            <Space.Fill />
            <Space.BottomResizable size="20%" />
        </Space.Layer>

        <Space.Layer zIndex={1}>
            <Space.Left as="aside"
                size={lsize}
                onMouseEnter={() => setLSize("50%")}
                onMouseLeave={() => setLSize("20%")} />

            <Space.Right as="aside"
                size={rsize}
                onMouseEnter={() => setRSize("50%")}
                onMouseLeave={() => setRSize("20%")} />
        </Space.Layer>

    </Space.Fixed>
)

Getting size information for a space

Using the Info component, you can get size information on the containing space. For live updates when the space size changes ensure that trackChanges is set to true on the space.

<Space.Fixed height="{400}">
    <Space.Fill trackSize={true}>
        <Space.Info>
            { info => <span>{info.width}px x {info.height}px</span> }
        </Space.Info>
    </Space.Fill>
</Space.Fixed>