---
title: ContentWrapper
description: >-
  The ContentWrapper component fetches and provides user-generated content data
  using a render function pattern.
api_name: shop-minis
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/components/primitives/contentwrapper'
  md: >-
    https://shopify.dev/docs/api/shop-minis/components/primitives/contentwrapper.md
---

# ContentWrapper

The `ContentWrapper` component fetches and provides user-generated content data using a render function pattern. It accepts either a `publicId` or `externalId` to identify the content, and passes the resolved content along with loading state to a child render function.

If `content` is not set (and `loading` is `false`), the ID was either not found or the content has been moderated and will not be shown. Users will always be able to see their own content.

Use `ContentWrapper` when you need full control over how content is rendered. For a simpler image-specific wrapper, see `ImageContentWrapper`.

**Note:**

Content rendered through `ContentWrapper` is wrapped in a `ContentMonitor` that allows users to report it for moderation.

#### Props

* **children**

  **({ content, loading, }: { content?: Content; loading: boolean; }) => Element**

  **required**

  A render function that receives the content data and loading state, and returns a React element.

* **externalId**

  **string**

  The external ID of the content item (use this OR publicId).

* **publicId**

  **string**

  The public ID of the content item (use this OR externalId).

### Content

* description

  ```ts
  string | null
  ```

* externalId

  ```ts
  string | null
  ```

* image

  ```ts
  ContentImage
  ```

* products

  ```ts
  ContentProduct[] | null
  ```

* publicId

  ```ts
  string
  ```

* shareableUrl

  ```ts
  string | null
  ```

* status

  ```ts
  MinisContentStatus | null
  ```

* title

  ```ts
  string
  ```

* visibility

  ```ts
  ContentVisibility[]
  ```

### ContentImage

* altText

  ```ts
  string | null
  ```

* height

  ```ts
  number | null
  ```

* id

  ```ts
  string | null
  ```

* thumbhash

  ```ts
  string | null
  ```

* url

  ```ts
  string
  ```

* width

  ```ts
  number | null
  ```

### ContentProduct

* featuredImage

  ```ts
  ContentImage | null
  ```

* id

  ```ts
  string
  ```

* title

  ```ts
  string
  ```

### MinisContentStatus

* PENDING

  ```ts
  PENDING
  ```

* READY

  ```ts
  READY
  ```

* REJECTED

  ```ts
  REJECTED
  ```

### ContentVisibility

```ts
'DISCOVERABLE' | 'LINKABLE'
```

Examples

### Examples

* ####

  ##### tsx

  ```tsx
  import React from 'react'

  import {ContentWrapper} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return (
      <ContentWrapper publicId="content-123">
        {({content, loading}) => {
          if (loading) return <div>Loading...</div>

          if (!content) return <div>No content found</div>

          return (
            <div>
              <h2>{content.title}</h2>
              {content.description && <p>{content.description}</p>}
              {content.image && (
                <img
                  src={content.image.url}
                  alt={content.title}
                  width={content.image.width || undefined}
                  height={content.image.height || undefined}
                />
              )}
            </div>
          )
        }}
      </ContentWrapper>
    )
  }
  ```

* ####

  ##### Description

  Fetch content using an external ID from your own system instead of the Shop-assigned public ID.

  ##### tsx

  ```tsx
  import React from 'react'

  import {ContentWrapper} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return (
      <ContentWrapper externalId="external-456">
        {({content, loading}) => {
          if (loading) return <div>Loading...</div>

          if (!content) return <div>No content found</div>

          return (
            <div>
              <h2>{content.title}</h2>
              {content.description && <p>{content.description}</p>}
              {content.image && (
                <img
                  src={content.image.url}
                  alt={content.title}
                  width={content.image.width || undefined}
                  height={content.image.height || undefined}
                />
              )}
            </div>
          )
        }}
      </ContentWrapper>
    )
  }
  ```

* ####

  ##### Description

  Render content alongside its associated products. Products are linked at creation time via the \`productIds\` parameter in \`useCreateImageContent\`.

  ##### tsx

  ```tsx
  import React from 'react'

  import {ContentWrapper} from '@shopify/shop-minis-react'

  /**
   * Renders content with its associated products.
   * Products are linked at creation time via the `productIds` parameter
   * in `useCreateImageContent`.
   */
  export default function ContentWithProducts() {
    return (
      <ContentWrapper publicId="content-123">
        {({content, loading}) => {
          if (loading) return <div>Loading...</div>

          if (!content) return <div>No content found</div>

          return (
            <div>
              <h2>{content.title}</h2>
              {content.description && <p>{content.description}</p>}
              {content.image && (
                <img
                  src={content.image.url}
                  alt={content.title}
                  width={content.image.width || undefined}
                  height={content.image.height || undefined}
                />
              )}

              {content.products && content.products.length > 0 && (
                <div>
                  <h3>Shop the look</h3>
                  <ul>
                    {content.products.map((product) => (
                      <li key={product.id}>
                        {product.featuredImage && (
                          <img
                            src={product.featuredImage.url}
                            alt={product.title}
                            width={64}
                            height={64}
                          />
                        )}
                        <span>{product.title}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              )}
            </div>
          )
        }}
      </ContentWrapper>
    )
  }
  ```

***

## Related

[- ImageContentWrapper](https://shopify.dev/docs/api/shop-minis/components/primitives/imagecontentwrapper)

[- useCreateImageContent](https://shopify.dev/docs/api/shop-minis/hooks/content/usecreateImagecontent)

***