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.

Anchor to propsProps

Anchor to children children ({ content, loading, }: { content?: ; loading: boolean; }) => Element required: A render function that receives the content data and loading state, and returns a React element.
Anchor to externalId externalId string: The external ID of the content item (use this OR publicId).
Anchor to publicId publicId string: The public ID of the content item (use this OR externalId).

Content

description
```
string | null
```
externalId
```
string | null
```
image
```
ContentImage
```
products
```
ContentProduct[] | null
```
publicId
```
string
```
shareableUrl
```
string | null
```
status
```
MinisContentStatus | null
```
title
```
string
```
visibility
```
ContentVisibility[]
```

ContentImage

altText
```
string | null
```
height
```
number | null
```
id
```
string | null
```
thumbhash
```
string | null
```
url
```
string
```
width
```
number | null
```

ContentProduct

featuredImage
```
ContentImage | null
```
id
```
string
```
title
```
string
```

MinisContentStatus

PENDING
```
PENDING
```
READY
```
READY
```
REJECTED
```
REJECTED
```

ContentVisibility

'DISCOVERABLE' | 'LINKABLE'

Examples

tsx

import React from 'react'

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

export default function MyComponent() {

return (

{({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>

)

}

Examples

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

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

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>
  )
}

Anchor to RelatedRelated

ImageContentWrapper

useCreateImageContent

Was this page helpful?