Zones in React

You can use zones to establish where a user can add widgets when they are editing a page in Spire.

A basic example of how a zone appears in a page or widget component:

<Zone contentId={id} zoneName="Content" />

This defines a single zone named "Content" that allows a Spire user to add widgets.

There are two special case zones described below: fixed zones and layout zones.

Fixed Zones

In a fixed zone, Spire users are not allowed to add or remove widgets, but they can still edit them.

<Zone contentId={id} zoneName="Content" fixd />

A common use case for a fixed zone is the site header, which you generally want to have somewhat locked down. For example, allowing a user to add a banner next to the main navigation would cause the site to look broken, but you still want to allow the user to edit which links appear in main navigation. Widgets can only be added or removed from a fixed zone when the page is created or updated from a Page Template.

Layout Zones

You can add a layout zone to a layout to define the zones available when a page is based on that layout. Spire layouts use a normal React component that defines zones, and the Spire user adds additional content to the layout. When a page is associated with a layout, it will display any content from the layout, and users can display content from the page within the layout.

📘

Note

• When a page has no layout a user can add widgets to any non-fixed zones defined in that page's React component.
• When a page has a layout a user can add widgets to any layout zones that were added to the layout the page is based on