TransitionLink

Examples

• tsx

  import React from 'react'
  import {MinisRouter, TransitionLink} from '@shopify/shop-minis-react'
  import {Routes, Route} from 'react-router'
  
  function Navigation() {
    return (
      <nav>
        <TransitionLink to="/">Home</TransitionLink>
        <TransitionLink to="/products">Products</TransitionLink>
        <TransitionLink to="/cart">Cart</TransitionLink>
      </nav>
    )
  }
  
  function App() {
    return (
      <div>
        <MinisRouter viewTransitions>
          <Routes>
            <Route path="/" element={<Navigation />} />
          </Routes>
        </MinisRouter>
      </div>
    )
  }
  
  export default App

• Description

  Basic navigation link with transitions

  tsx

  import React from 'react'
  import {MinisRouter, TransitionLink} from '@shopify/shop-minis-react'
  import {Routes, Route} from 'react-router'
  
  function Navigation() {
    return (
      <nav>
        <TransitionLink to="/">Home</TransitionLink>
        <TransitionLink to="/products">Products</TransitionLink>
        <TransitionLink to="/cart">Cart</TransitionLink>
      </nav>
    )
  }
  
  function App() {
    return (
      <div>
        <MinisRouter viewTransitions>
          <Routes>
            <Route path="/" element={<Navigation />} />
          </Routes>
        </MinisRouter>
      </div>
    )
  }
  
  export default App

• Description

  Styled navigation link with custom classes

  tsx

  import React from 'react'
  import {TransitionLink} from '@shopify/shop-minis-react'
  
  function StyledNavigation() {
    return (
      <nav className="navigation">
        <TransitionLink
          to="/products/123"
          className="product-link"
          style={{ color: '#007AFF', textDecoration: 'none' }}
        >
          View Product Details
        </TransitionLink>
  
        <TransitionLink
          to="/cart"
          className="cart-link"
          aria-label="Go to shopping cart"
        >
          <span>Shopping Cart</span>
          <span className="cart-count">(3)</span>
        </TransitionLink>
      </nav>
    )
  }
  
  export default StyledNavigation

• Description

  Navigation with custom click handler

  tsx

  import React from 'react'
  import {TransitionLink} from '@shopify/shop-minis-react'
  
  function NavigationWithAnalytics() {
    const handleLinkClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
      // Track analytics event
      console.log('Navigation clicked:', event.currentTarget.href)
  
      // You can prevent navigation by calling event.preventDefault()
      // event.preventDefault()
    }
  
    return (
      <div>
        <TransitionLink
          to="/products/special-offer"
          onClick={handleLinkClick}
        >
          Special Offer - Click tracking enabled
        </TransitionLink>
  
        <TransitionLink
          to="/checkout"
          onClick={(e) => {
            // Confirm before navigating
            const confirmed = window.confirm('Proceed to checkout?')
            if (!confirmed) {
              e.preventDefault()
            }
          }}
        >
          Proceed to Checkout
        </TransitionLink>
      </div>
    )
  }
  
  export default NavigationWithAnalytics