update demo; 0.3.0

shuding · Jul 27, 2024 · 11a71c8 · 11a71c8
1 parent 08d0a48
commit 11a71c8
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 65 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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",