> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Container

## Article: Container

## Article Link: https://dev.wix.com/docs/site-extensions/editor-react-components/editor-react-types/reference/container.md

## Article Content:

import { Property, PropertyList, ExpandableSection } from "@wix/docs-ui/content";

# Container

A slot in your component where the Wix user drops child components in the editor. Your
code renders whatever the editor composes into the slot.

## Component

In your component code, import the `Container` type from `@wix/editor-react-types`:

```ts
import type { Container } from '@wix/editor-react-types';
```

At runtime it's one of two shapes:

```ts
type Container = ReactNode | FC<Record<string, unknown>>
```

A container arrives either as a `ReactNode` you render as children, or a function you call
to render, depending on how the slot is configured in the manifest.

### Usage

The editor composes a container's content, so your code only consumes it. There is nothing
to produce.

::::tabs
:::Consumers
In a component that receives a `Container`, render it directly when it's a node, or call it
when it's a function:

```tsx
import type { Container } from '@wix/editor-react-types';

function Card({ content }: { content?: Container }) {
  return <div>{typeof content === 'function' ? content({}) : content}</div>;
}
```
:::
::::

## Manifest

In your manifest, declare the field with the `container` dataType:

```json
{ "dataType": "container" }
```

A slot is composed by the Wix user in the editor rather than passed as a value, so a
container cannot be a context item or a function parameter or return.

### Declaration

::::tabs
:::Data-property
Declare it as a data property with a required `container` object describing the slot:

```json
{
  "content": {
    "dataType": "container",
    "displayName": "Content",
    "container": {
      "selector": ".content-slot",
      "containerType": "simple"
    }
  }
}
```

#### Options

The `container` object takes the following fields:

<PropertyList bordered>
  <Property
    name="selector"
    type="string"
    required
    description="A DOM selector for the slot."
  />
  <Property
    name="containerType"
    type="'simple' | 'slot' | 'placeholder' | 'template'"
    required
    description="The kind of slot. See the manifest reference for what each does."
  />
</PropertyList>
:::
::::