# 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: 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.