> For the complete documentation index, see [llms.txt](https://redd.gitbook.io/atomic-layout/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://redd.gitbook.io/atomic-layout/recipes/namespaces.md).

# Namespaces

When using layout areas Atomic Layout generates React components for each declared area:

```jsx
import React from 'react'
import { Composition } from 'atomic-layout'

export const Header = () => (
  <Composition areas="logo menu">
    {({ Logo, Menu }) => ( // <-- generted areas components
      <>
        <Logo>{...}</Logo>
        <Menu>{...}</Menu>
      </>
    )}
  </Composition>
)
```

To make the rendering part shorter, we recommend using [Object Spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) for areas object given as an argument to the render function.

However, this way area components reserve their namespaces within the render function's scope. This may result into conflicts when you have custom React components which name matches the area name:

```jsx
const Logo = () => <img src="logo.png" />

export const Header = () => (
  <Composition areas="logo menu">
    {({ Logo, Menu }) => (
      <>
        <Logo> // this is an area component
          <Logo /> // this is also an area component
        </Logo>
        <Menu>{...}</Menu>
      </>
    )}
  </Composition>
)
```

> Referencing custom Logo component becomes problematic and requires to rename things around.

To prevent from namespace collisions we recommend not to spread the areas Object in cases when areas names match the names of your custom React components:

```jsx
import React from 'react'
import { Composition } from 'atomic-layout'

const Logo = () => (
  return <img src="logo.png" />
)

export const Header = () => (
  <Composition areas="logo menu">
    {(Areas) => (
      <>
        <Areas.Logo> // scoped area component
          <Logo /> // your custom component
        </Areas.Logo>
        <Areas.Menu>{...}</Areas.Menu>
      </>
    )}
  </Composition>
)
```

> This way generated areas are scoped under a single "Areas" namespace.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://redd.gitbook.io/atomic-layout/recipes/namespaces.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.