# Container

The Container app exports a simple container block that can be used to wrap other blocks.

1. Adding the app as a theme dependency in the `manifest.json` file;

```json
  "dependencies": {
    "{vendor}.container": "0.x"
  }
```

2. Declaring the app's main block in a given theme template or inside another block from the theme.

| Block name              | Description                                                |
| ----------------------- | ---------------------------------------------------------- |
| `container`             | Just a container                                           |
| `container.list-render` | A container that consumes list context and render the list |

### `container` and `container.list-render` props

| Prop name            | Type      | Description                                                                                             | Default value |
| -------------------- | --------- | ------------------------------------------------------------------------------------------------------- | ------------- |
| `stopPropagation`    | `boolean` | Indicates if the event should stop propagating to parent elements                                       | `false`       |
| `htmlId`             | `string`  | The id to be assigned to the component's HTML element                                                   | -             |
| `renderIfNoChildren` | `boolean` | Determines whether the component should be rendered even if it has no children                          | `true`        |
| `wrapper`            | `boolean` | Determines whether the component should be wrapped with a `div` element                                 | `false`       |
| `containerElement`   | `string`  | The HTML tag to be used as the component element                                                        | `div`         |
| `pixelEvent`         | `object`  | An object containing information about a VTEX Pixel event to be triggered when the component is clicked | -             |
| `shouldRender`       | `boolean` | Determines whether the component should be rendered                                                     | `true`        |
| `htmlAttributes`     | `object`  | An object containing additional HTML attributes to be added to the component element                    | -             |
| `customClasses`      | `object`  | An object containing custom classes to be added to the component element                                | -             |
| `pageClass`          | `boolean` | Determines whether the `blockClass` should be prefixed with the current page's name                     | `false`       |
| `lazyRender`         | `boolean` | Whether to lazily render the component (i.e., render only when it becomes visible on the screen).       | `false`       |
| `lazyImages`         | `boolean` | Whether to lazily render the images inside this container                                               | `false`       |

**The `pixelEvent` object**

| Prop name              | Type     | Description                                                               | Default value |
| ---------------------- | -------- | ------------------------------------------------------------------------- | ------------- |
| `customPixelEventId`   | `string` | Event ID responsible for triggering a block that listens to pixelEvent.   | `undefined`   |
| `customPixelEventName` | `string` | Event name responsible for triggering a block that listens to pixelEvent. | `undefined`   |

### `container.list-render` props

| Prop name           | Type      | Description                                                                                                                            | Default value |
| ------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `itemElement`       | `string`  | HTML element used to render the items of the list (ex: div, li, etc)                                                                   | `Fragment`    |
| `includeSeparators` | `boolean` | Includes a div that can be used as a visual separator when set to true, remember that the rendered div does not have any default style | `false`       |

## Customization

`In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).`

| CSS Handles |
| ----------- |
| `container` |
| `listItem`  |
| `wrapper`   |
| `separator` |