@shopify/shop-minis-react/src/hooks/navigation/useDeeplink.ts

React component library for Shopify Shop Minis with Tailwind CSS v4 support (source-only, requires TypeScript)

import {useMemo} from 'react'

import {parseUrl} from '../../utils/parseUrl'

interface UseDeeplinkReturnType {
  /**
   * The path of the deeplink.
   */
  path?: string
  /**
   * The query parameters of the deeplink.
   */
  queryParams?: {[key: string]: string | undefined}
  /**
   * The hash of the deeplink.
   */
  hash?: string
}

export const useDeeplink = (): UseDeeplinkReturnType => {
  const {initialUrl} = window.minisParams

  return useMemo(() => {
    if (!initialUrl) {
      return {
        path: undefined,
        queryParams: undefined,
        hash: undefined,
      }
    }

    const parsedUrl = parseUrl(initialUrl)

    return {
      path: parsedUrl.pathname,
      queryParams: parsedUrl.query,
      hash: parsedUrl.hash,
    }
  }, [initialUrl])
}