RegionView

RegionView renders the views that esp-js-ui modules bind to one region.

Place a region

RegionView takes one prop, regionName. It needs an EspApp above it, which gives it the app’s modules.

This is a shorter version of the shell of the example app, with a main region and a weather region:

import { RegionView } from 'esp-js-react';

export const AppShell = () => (
    <div style={{ display: 'flex', gap: '24px' }}>
        <div style={{ flex: 1 }}>
            <RegionView regionName="main" />
        </div>
        <div style={{ width: '360px' }}>
            <RegionView regionName="weather" />
        </div>
    </div>
);

A module binds a view to a region with withView(storeId, Component, region). See views.

What it renders

For each withView binding whose region equals regionName, RegionView renders a ConnectableComponent with the binding’s storeId and view. The views appear in the order described in regions.

RegionView renders nothing if no binding matches regionName, or if there is no EspApp above it.

Two bindings in a region can use the same storeId. Each shows its own view of that store.