View Transition Link

A zero-dependency React and Next.js component that adds smooth page transitions using the View Transitions API, with graceful fallbacks for unsupported browsers.

Features

• Zero Dependencies - Lightweight and efficient
• Next.js App Router Ready - Full support for Next.js 13+ and the App Router
• View Transitions API - Smooth page transitions in supported browsers
• Graceful Fallback - Clean fallback for unsupported browsers
• Fully Tested - 100% test coverage
• TypeScript Support - Full type safety and IntelliSense
• Highly Configurable - Customizable transitions and behavior

Installation

npm install @rodrigoant/view-transition-link

# or with yarn
yarn add @rodrigoant/view-transition-link

# or with pnpm
pnpm add @rodrigoant/view-transition-link

Quick Start

You can import the component in two ways:

// Using default import
import Link from "@rodrigoant/view-transition-link";
// OR using named import
import { Link } from "@rodrigoant/view-transition-link";

function MyComponent() {
  return <Link href="/about">About Page</Link>;
}

Advanced Usage

With Custom Transition Delay

import Link from "@rodrigoant/view-transition-link";

function MyComponent() {
  return (
    <Link
      href="/about"
      delay={500}
      className="my-link-class"
      onClick={(e) => console.log("Link clicked!")}
    >
      About Page
    </Link>
  );
}

With Next.js Features

import Link from "@rodrigoant/view-transition-link";

function MyComponent() {
  return (
    <Link
      href="/dashboard"
      prefetch={true}
      replace={false}
      scroll={true}
      shallow={false}
    >
      Dashboard
    </Link>
  );
}

API Reference

Core Props

| Prop | Type | Default | Description | | ----------- | ------------------------- | ----------- | ------------------------------------ | | href | string | Required | The target URL for navigation | | children | ReactNode | Required | React children elements | | className | string | undefined | CSS class for styling | | disabled | boolean | false | Disables the link when true | | tabIndex | number | undefined | Sets the tab index for accessibility | | title | string | undefined | Sets the title attribute | | onClick | (e: MouseEvent) => void | undefined | Custom click handler | | delay | number | 0 | Transition delay in milliseconds |

Next.js Specific Props

| Prop | Type | Default | Description | | ---------- | --------- | ------- | ------------------------------------- | | prefetch | boolean | true | Enable/disable prefetching | | replace | boolean | false | Replace instead of push to history | | scroll | boolean | true | Auto-scroll to top after navigation | | shallow | boolean | false | Shallow routing without data fetching |

Browser Support

• ✅ Chrome/Edge 111+: Full View Transitions API support
• ✅ Safari/Firefox: Graceful fallback to standard navigation
• ✅ All Browsers: Basic navigation functionality preserved

The component automatically detects browser support and provides appropriate behavior:

• In supported browsers: Smooth view transitions with configurable delays
• In other browsers: Clean fallback to standard navigation

Development

# Install dependencies
npm install

# Run tests
npm test

# Build the package
npm run build

Testing

The component is thoroughly tested with Jest and React Testing Library. All tests are passing, covering:

• Core navigation functionality
• View Transitions API integration
• Next.js specific features
• Error handling
• Accessibility features
• Edge cases

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m 'Add amazing feature'
4. Push to the branch: git push origin feature/amazing-feature
5. Open a Pull Request

License

MIT