@zeejs/react v0.3.1

zeejs React - simple API to create multi layered UI

what's in the box

• layers - automatic ordering of nested layers
• backdrop - hide / block background or keep a layer as part of the flow
• focus
  • Tab between layers
  • trap focus above backdrop
  • re-focus when blocking layer close
  • focusChange notification when focus outside / inside logical layer
• click outside - notification for click outside of logical layer
• mouse interaction - notification for mouse enter / leave of logical layer
• escape catching - notification for escape press
• server rendering - single pass nested rendering of layers in the server
• component primitives - Tooltip, Popover, Modal
• typed - built with TypeScript
• tested - tested in a browser

how to use

This document describes the zeejs React usage, For a more in depth overview of zeejs, please see the general documentation.

<Root> component

At the base of the application or website place the <Root> component. The Root component is responsible for collecting, rendering and managing the layers.

Notice that Root is required for zeejs to work properly.

props:

code example:

import { Root } from '@zeejs/react';

ReactDOM.render(
    <Root className="app-root" style={{ height: `100%` }}>
        {/* application code */}
    </Root>
);

will output:

<div class="app-root" style="height: 100%">
    <zeejs-layer>
        <!-- application code -->
    </zeejs-layer>
</div>

<Layer> component

At every point that requires a part of the DOM to be moved up the normal layout flow and out of any overflows, a <Layer> component can be placed. The Layer is the low level primitive of zeejs that takes any given content and renders it in its own layer.

The component will generate a new zeejs layer above layer it is rendered in.

props:

code example:

import { Layer } from '@zeejs/react';

const Component = () => {
    return (
        <div>
            <Layer>{/* layer content */}</Layer>
        </div>
    );
};

will output (assuming render in the application layer):

<div>
    <zeejs-layer>
        <!-- application code containing layer component -->
    </zeejs-layer>
    <zeejs-layer style="/* bound to window or reference element */">
        <!-- layer content -->
    </zeejs-layer>
</div>

nesting code example:

import { Layer } from '@zeejs/react';

const Component = () => {
    return (
        <div>
            <Layer>
                <div>
                    {/* layer A content*/}
                    <Layer>{/* layer B content */}</Layer>
                </div>
            </Layer>
        </div>
    );
};

will output (assuming render in the application layer):

<div>
    <zeejs-layer>
        <!-- application code containing layer component -->
    </zeejs-layer>
    <zeejs-layer>
        <!-- layer A content -->
    </zeejs-layer>
    <zeejs-layer>
        <!-- layer B content -->
    </zeejs-layer>
</div>

<Modal> component

The modal primitive display content that is not affected by the scroll of lower layers.

props:

<Tooltip> component

The tooltip primitive displays hovered content that is bound to the UI that opened it, usually used to label or describe it.

props:

<Popover> component

The modal primitive display content that is not affected by the scroll of lower layers while being bound to the UI the opened it.

props: