Skip to main content

Area

Description​

The Area component is a powerful container that manages the rendering of multiple components in a specific area of your application. It handles component ordering, dynamic props injection from GraphQL data, and widget integration, making it the core building block of EverShop's flexible layout system.

Import​

import { Area } from '@components/common/Area';

Usage​

import { Area } from '@components/common/Area';

function Layout() {
  return (
    <div>
      <Area id="header" className="header-area" />
      <Area id="content" className="content-area" />
      <Area id="footer" className="footer-area" />
    </div>
  );
}

Props​

NameTypeDefaultDescription
idstring-Unique identifier for the area (required)
classNamestring-CSS class for the wrapper element
coreComponentsComponent[][]Array of core components to render
componentsComponents-Object mapping area IDs to components
wrapperReact.ReactNode | string'div'Wrapper element or component
wrapperPropsRecord<string, any>Props to pass to the wrapper element
noOuterbooleanfalseIf true, renders without wrapper element

Component Interface​

interface Component {
  id?: string;
  sortOrder?: number;
  props?: Record<string, any>;
  component: {
    default: React.ElementType | React.ReactNode;
  };
}

Example: Basic Area​

import { Area } from '@components/common/Area';

function HomePage() {
  return (
    <div className="page">
      <Area 
        id="hero" 
        className="hero-section"
      />
      <Area 
        id="features" 
        className="features-section"
      />
    </div>
  );
}

Example: With Core Components​

import { Area } from '@components/common/Area';
import Logo from '@components/common/Logo';
import Navigation from '@components/common/Navigation';

function Header() {
  const coreComponents = [
    {
      id: 'logo',
      sortOrder: 10,
      component: { default: Logo },
      props: { size: 'large' }
    },
    {
      id: 'nav',
      sortOrder: 20,
      component: { default: Navigation }
    }
  ];

  return (
    <Area
      id="header"
      className="site-header"
      coreComponents={coreComponents}
    />
  );
}

Example: Custom Wrapper​

import { Area } from '@components/common/Area';

function ProductGrid() {
  return (
    <Area
      id="productList"
      wrapper="section"
      wrapperProps={{
        className: 'grid grid-cols-3 gap-4',
        'aria-label': 'Product listing'
      }}
    />
  );
}

Example: No Wrapper​

import { Area } from '@components/common/Area';

function InlineArea() {
  return (
    <div className="container">
      <h1>Title</h1>
      <Area
        id="inlineContent"
        noOuter={true}
      />
    </div>
  );
}

Adding Components to Area via Layout Export​

The most common way to add components to an Area is by using the layout constant export in your component files. This allows EverShop to automatically register your component to specific areas.

Basic Layout Export​

// MyComponent.tsx
import React from 'react';

export default function MyComponent() {
  return <div>My Component Content</div>;
}

export const layout = {
  areaId: 'content',
  sortOrder: 10
};

See Also​