useIntent

Parses an intent passed to the Mini via deeplink, following the Shopify Intents API URI format (action:type,value). Returns the parsed query (action, type, value) and optional data payload. Use this hook to receive intents from the host app (Host → Mini direction), for example when the Shop app launches a Mini to handle a virtual try-on for a specific product.

Anchor to useIntent
useIntent()

Anchor to useIntent-returnsReturns

UseIntentReturn

data
Additional JSON data passed with the intent, or null
```
{[key: string]: unknown} | null
```
query
Parsed intent query, or null if no intent was passed
```
IntentQuery | null
```

IntentQuery

Structured description of an intent, following the Shopify Intents API URI format: `action:type,value`

action
Verb describing the operation (e.g., 'try_on', 'create', 'edit')
```
string
```
type
Resource type identifier (e.g., 'shopify/Product', 'shop/UserImage')
```
string
```
value
Resource GID (e.g., 'gid://shopify/Product/123') if applicable
```
string | null
```

Examples

tsx

import {useEffect} from 'react'

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

export default function MyMini() {

const {query, data} = useIntent()

const {action, type, value} = query ?? {}

useEffect(() => {

if (action === 'try_on' && value) {

// Navigate to try-on screen with the product GID

console.log(`Try on ${type}:`, value, data)

}

}, [query, data])

}

Examples

tsx

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

export default function MyMini() {
  const {query, data} = useIntent()

  const {action, type, value} = query ?? {}

  useEffect(() => {
    if (action === 'try_on' && value) {
      // Navigate to try-on screen with the product GID
      console.log(`Try on ${type}:`, value, data)
    }
  }, [query, data])
}

Anchor to RelatedRelated

Intents

useDeeplink