useNavigateWithTransition

The useNavigateWithTransition hook provides programmatic navigation with smooth view transitions support. It wraps React Router's useNavigate hook with CSS View Transitions API integration, enabling app-like page transitions when the browser supports it. Falls back gracefully to standard navigation on unsupported browsers.

Examples

tsx

import {useNavigateWithTransition, Button} from '@shopify/shop-minis-react'

export default function MyComponent() {

const transitionNavigate = useNavigateWithTransition()

const handleProductClick = () => {

transitionNavigate('/products/123')

}

const handleGoBack = () => {

transitionNavigate(-1)

}

return (

<Button onClick={handleProductClick}>View Product</Button>

</>

)

}

Examples

tsx

import {useNavigateWithTransition, Button} from '@shopify/shop-minis-react'

export default function MyComponent() {
  const transitionNavigate = useNavigateWithTransition()

  const handleProductClick = () => {
    transitionNavigate('/products/123')
  }

  const handleGoBack = () => {
    transitionNavigate(-1)
  }

  return (
    <>
      <Button onClick={handleProductClick}>View Product</Button>
      <Button onClick={handleGoBack}>Go Back</Button>
    </>
  )
}

Description

Navigate to a specific route with smooth transition

tsx

import React from 'react'
import {useNavigateWithTransition, Button} from '@shopify/shop-minis-react'

function ProductActions({productId}: {productId: string}) {
  const navigateWithTransition = useNavigateWithTransition()

  const handleViewDetails = () => {
    // Navigate to product details page with smooth transition
    navigateWithTransition(`/products/${productId}`)
  }

  const handleViewCategory = (category: string) => {
    // Navigate to category page
    navigateWithTransition(`/categories/${category}`)
  }

  const handleCheckout = () => {
    // Navigate to checkout with query parameters
    navigateWithTransition('/checkout?step=shipping')
  }

  return (
    <div>
      <Button onPress={handleViewDetails}>
        View Product Details
      </Button>
      <Button onPress={() => handleViewCategory('electronics')}>
        Browse Electronics
      </Button>
      <Button onPress={handleCheckout}>
        Proceed to Checkout
      </Button>
    </div>
  )
}

export default ProductActions

Description

Navigate back and forward in history with transitions

tsx

import React from 'react'
import {useNavigateWithTransition, Button} from '@shopify/shop-minis-react'

function NavigationControls() {
  const navigateWithTransition = useNavigateWithTransition()

  const handleGoBack = () => {
    // Navigate back one page in history with smooth transition
    navigateWithTransition(-1)
  }

  const handleGoBackTwo = () => {
    // Navigate back two pages
    navigateWithTransition(-2)
  }

  const handleGoForward = () => {
    // Navigate forward one page in history
    navigateWithTransition(1)
  }

  return (
    <div className="navigation-controls">
      <Button onPress={handleGoBack}>
        Back
      </Button>
      <Button onPress={handleGoBackTwo}>
        Back to Home
      </Button>
      <Button onPress={handleGoForward}>
        Forward
      </Button>
    </div>
  )
}

export default NavigationControls

Description

Navigation with options like replace and state

tsx

import React from 'react'
import {useNavigateWithTransition, Button} from '@shopify/shop-minis-react'

function AdvancedNavigation() {
  const navigateWithTransition = useNavigateWithTransition()

  const handleReplaceNavigation = () => {
    // Replace current history entry instead of pushing a new one
    navigateWithTransition('/login', { replace: true })
  }

  const handleNavigationWithState = () => {
    // Pass state data to the next page
    navigateWithTransition('/checkout', {
      state: {
        from: 'product-page',
        cartItems: 3,
        timestamp: Date.now()
      }
    })
  }

  const handleConditionalNavigation = async () => {
    try {
      const isValid = await validateSession()

      if (isValid) {
        // Navigate with both replace and state options
        navigateWithTransition('/dashboard', {
          replace: true,
          state: { authenticated: true }
        })
      } else {
        navigateWithTransition('/login')
      }
    } catch (error) {
      console.error('Navigation failed:', error)
    }
  }

  return (
    <div>
      <Button onPress={handleReplaceNavigation}>
        Login (Replace History)
      </Button>
      <Button onPress={handleNavigationWithState}>
        Checkout with State
      </Button>
      <Button onPress={handleConditionalNavigation}>
        Go to Dashboard
      </Button>
    </div>
  )
}

// Mock validation function
async function validateSession() {
  return new Promise<boolean>((resolve) => {
    setTimeout(() => resolve(true), 100)
  })
}

export default AdvancedNavigation

Was this page helpful?