From 11a71c84e011d5736788aadc495bd5d6f30c0a2a Mon Sep 17 00:00:00 2001
From: Shu Ding <g@shud.in>
Date: Sat, 27 Jul 2024 22:41:43 +0200
Subject: [PATCH] update demo; 0.3.0

---
 README.md                |  19 ++++++
 example/app/demo/page.js |  17 ++++-
 example/app/page.js      | 140 ++++++++++++++++++++++-----------------
 package.json             |   2 +-
 4 files changed, 113 insertions(+), 65 deletions(-)

diff --git a/README.md b/README.md
index a0064f1..f55c194 100644
--- a/README.md
+++ b/README.md
@@ -50,6 +50,25 @@ export default function Component() {
 }
 ```
 
+Or use the `useTransitionRouter` hook for programmatic navigation:
+
+```jsx
+import { useTransitionRouter } from 'next-view-transitions'
+
+export default function Component() {
+  const router = useTransitionRouter()
+
+  return (
+    <div>
+      <button onClick={() => {
+        // All Next.js router methods are supported
+        router.push('/about')
+      }}>Go to /about</button>
+    </div>
+  )
+}
+```
+
 That's it!
 
 ## License
diff --git a/example/app/demo/page.js b/example/app/demo/page.js
index 783c1b9..1dcbf08 100644
--- a/example/app/demo/page.js
+++ b/example/app/demo/page.js
@@ -1,13 +1,24 @@
-import { Link } from 'next-view-transitions'
+'use client'
+
+import { useTransitionRouter } from 'next-view-transitions'
 
 export default function Page() {
+  const router = useTransitionRouter()
   return (
     <div className='demo-box'>
       <h2>
-        This is the <span className='demo'>Demo</span>
+        This is the <span className='demo'>demo</span>
       </h2>
       <p>OK you just saw the demo :)</p>
-      <Link href='/'>Open homepage →</Link>
+      <a
+        href='/'
+        onClick={(e) => {
+          e.preventDefault()
+          router.back()
+        }}
+      >
+        ← Back to homepage
+      </a>
     </div>
   )
 }
diff --git a/example/app/page.js b/example/app/page.js
index 46a9534..519bf1a 100644
--- a/example/app/page.js
+++ b/example/app/page.js
@@ -1,38 +1,35 @@
 'use client'
 
 import { Link, useTransitionRouter } from 'next-view-transitions'
-import { useState } from "react";
 
 export default function Page() {
-  const [withCustomTransition, setWithCustomTransition] = useState(false)
-  const router = useTransitionRouter();
-
-  const routerNavigate = () => {
-    router.push('/demo', {
-        onTransitionReady: withCustomTransition ? slideInOut: undefined,
-    });
-  }
+  const router = useTransitionRouter()
 
   return (
     <div>
       <h2>
         <span className='demo'>Demo</span>
       </h2>
-        <p>
-            <Link href='/demo'>Go to /demo →</Link>
-        </p>
-        <p>
-            <a onClick={routerNavigate}>Go to /demo with router.push →</a>
-        </p>
-        <p>
-            <label>
-                <input type="checkbox" onChange={() => setWithCustomTransition((prev) => !prev)}/>{' '}
-                custom transition
-            </label>
-        </p>
-        <h2>Disclaimer</h2>
-        <p>
-            This library is aimed at basic use cases of View Transitions and Next.js
+      <p>
+        <Link href='/demo'>Go to /demo →</Link>
+      </p>
+      <p>
+        <a
+          onClick={(e) => {
+            e.preventDefault()
+            router.push('/demo', {
+              // Optional custom transition
+              onTransitionReady: slideInOut,
+            })
+          }}
+          href='/demo'
+        >
+          Go to /demo with custom transition →
+        </a>
+      </p>
+      <h2>Disclaimer</h2>
+      <p>
+        This library is aimed at basic use cases of View Transitions and Next.js
         App Router. With more complex applications and use cases like concurrent
         rendering, Suspense and streaming, new primitives and APIs still need to
         be developed into the core of React and Next.js in the future (
@@ -90,6 +87,28 @@ export default function Component() {
       <Link href='/about'>Go to /about</Link>
     </div>
   )
+}`}
+        </code>
+      </pre>
+      <p>
+        Or use the <code>useTransitionRouter()</code> hook to navigate manually:
+      </p>
+      <pre>
+        <code>
+          {`\
+import { useTransitionRouter } from 'next-view-transitions'
+
+export default function Component() {
+  const router = useTransitionRouter()
+  return (
+    <div>
+      <button onClick={() => {
+        router.push('/about')
+      }}>
+        Go to /about
+      </button>
+    </div>
+  )
 }`}
         </code>
       </pre>
@@ -99,42 +118,41 @@ export default function Component() {
 }
 
 function slideInOut() {
-    document.documentElement.animate(
-        [
-            {
-                opacity: 1,
-                transform: 'translate(0, 0)',
-            },
-            {
-                opacity: 0,
-                transform: 'translate(-100%, 0)',
-            },
-        ],
-        {
-            duration: 500,
-            easing: 'ease-in-out',
-            fill: 'forwards',
-            pseudoElement: '::view-transition-old(root)',
-        }
-    );
+  document.documentElement.animate(
+    [
+      {
+        opacity: 1,
+        transform: 'translate(0, 0)',
+      },
+      {
+        opacity: 0,
+        transform: 'translate(-100px, 0)',
+      },
+    ],
+    {
+      duration: 400,
+      easing: 'ease',
+      fill: 'forwards',
+      pseudoElement: '::view-transition-old(root)',
+    }
+  )
 
-    document.documentElement.animate(
-        [
-            {
-                opacity: 0,
-                transform: 'translate(100%, 0)',
-            },
-            {
-                opacity: 1,
-                transform: 'translate(0, 0)',
-            },
-        ],
-        {
-            duration: 500,
-            easing: 'ease-in-out',
-            fill: 'forwards',
-            pseudoElement: '::view-transition-new(root)',
-        }
-    );
+  document.documentElement.animate(
+    [
+      {
+        opacity: 0,
+        transform: 'translate(100px, 0)',
+      },
+      {
+        opacity: 1,
+        transform: 'translate(0, 0)',
+      },
+    ],
+    {
+      duration: 400,
+      easing: 'ease',
+      fill: 'forwards',
+      pseudoElement: '::view-transition-new(root)',
+    }
+  )
 }
-
diff --git a/package.json b/package.json
index e7176c0..ae42cbd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next-view-transitions",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "description": "View Transitions API for Next.js App Router",
   "main": "./dist/index.js",