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