useNavigateWithTransition

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