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

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

import {useEffect} from 'react'

import {useNavigationType, useLocation} from 'react-router'

import {DATA_NAVIGATION_TYPE_ATTRIBUTE, NAVIGATION_TYPES} from '../../types'

export function useViewTransitions() {
  const location = useLocation()
  const navType = useNavigationType()

  useEffect(() => {
    let isAndroidBackPress = false

    const handleAndroidBackPress = () => {
      isAndroidBackPress = true

      if (document.startViewTransition) {
        const transition = document.startViewTransition(() => {
          document.documentElement.setAttribute(
            DATA_NAVIGATION_TYPE_ATTRIBUTE,
            NAVIGATION_TYPES.backward
          )
        })

        transition.finished
          .then(() => {
            document.documentElement.removeAttribute(
              DATA_NAVIGATION_TYPE_ATTRIBUTE
            )
          })
          .catch(error => {
            console.error('View transition error:', error)
          })
      }
    }

    const handlePopstate = (event: PopStateEvent) => {
      // If the ios back gesture is used, we don't want to trigger view transition
      if (event.hasUAVisualTransition && !isAndroidBackPress) {
        document.documentElement.setAttribute(
          DATA_NAVIGATION_TYPE_ATTRIBUTE,
          NAVIGATION_TYPES.none
        )
      }
    }

    window.addEventListener('androidbackpressed', handleAndroidBackPress)
    window.addEventListener('popstate', handlePopstate)

    return () => {
      window.removeEventListener('popstate', handlePopstate)
      window.removeEventListener('androidbackpressed', handleAndroidBackPress)
    }
  }, [location])

  useEffect(() => {
    const currentNavType = document.documentElement.getAttribute(
      DATA_NAVIGATION_TYPE_ATTRIBUTE
    )

    if (!currentNavType) {
      if (navType === 'PUSH') {
        document.documentElement.setAttribute(
          DATA_NAVIGATION_TYPE_ATTRIBUTE,
          NAVIGATION_TYPES.forward
        )
      } else if (navType === 'POP') {
        document.documentElement.setAttribute(
          DATA_NAVIGATION_TYPE_ATTRIBUTE,
          NAVIGATION_TYPES.backward
        )
      }
    }

    return () => {
      document.documentElement.removeAttribute(DATA_NAVIGATION_TYPE_ATTRIBUTE)
    }
  }, [navType, location])
}