docs: update demo and readme

Author: Saiya

README.md

@@ -90,7 +90,11 @@ pnpm install
 pnpm dev
 ```
 
-Open [http://localhost:5173](http://localhost:5173) and switch between demo pages to explore all features and edge cases.
+Open [http://localhost:5173](http://localhost:5173) and switch between demo pages to explore all features and edge cases:
+* [iOS Contact](http://localhost:5173/#ios-contact) a dead simple iOS contact clone
+* [Mixed mode](http://localhost:5173/#mixed-mode) mix replace/stack/none mode
+* [Nested](http://localhost:5173/#dynamic-height) nest sticky containers
+* [Dynamic sticky items](http://localhost:5173/#nested) dynamic sticky items(add/remove)
 
 ## License
 

demo/App.tsx

@@ -5,42 +5,42 @@ import NestedStickyDemo from './NestedStickyDemo';
 import DynamicStickyDemo from './DynamicStickyDemo';
 
 const pages = [
-  { name: 'iPhone Contacts Demo', component: <ContactListDemo /> },
-  { name: 'Mixed Sticky Modes Demo', component: <MixedModeDemo /> },
-  { name: 'Nested Sticky Containers', component: <NestedStickyDemo /> },
-  { name: 'Dynamic Sticky Items', component: <DynamicStickyDemo /> },
+  { hash: 'ios-contact', name: 'iPhone Contacts Demo', component: <ContactListDemo /> },
+  { hash: 'mixed-mode', name: 'Mixed Sticky Modes Demo', component: <MixedModeDemo /> },
+  { hash: 'nested', name: 'Nested Sticky Containers', component: <NestedStickyDemo /> },
+  { hash: 'dynamic', name: 'Dynamic Sticky Items', component: <DynamicStickyDemo /> },
 ];
 
 // Sync pageIdx with location.hash
-function getIdxFromHash(pagesLen: number) {
-  const idx = Number(window.location.hash.replace('#', ''));
-  return Number.isFinite(idx) && idx >= 0 && idx < pagesLen ? idx : 0;
+function getPageHashFromLocation() {
+  const hash = window.location.hash.replace('#', '');
+  return pages.find(p => p.hash === hash) ? hash : pages[0].hash;
 }
 
 export default function App() {
-  const [pageIdx, setPageIdx] = useState(() => getIdxFromHash(pages.length));
+  const [pageHash, setPageHash] = useState(() => getPageHashFromLocation());
 
   useEffect(() => {
-    const onHashChange = () => setPageIdx(getIdxFromHash(pages.length));
+    const onHashChange = () => setPageHash(getPageHashFromLocation());
     window.addEventListener('hashchange', onHashChange);
     return () => window.removeEventListener('hashchange', onHashChange);
   }, []);
 
-  const handleNav = (i: number) => {
-    window.location.hash = String(i);
-    setPageIdx(i);
+  const handleNav = (n: string) => {
+    window.location.hash = n
+    setPageHash(n);
   };
 
   return (
     <div style={{ minHeight: '100vh', background: '#f7f7f7' }}>
       <nav style={{ display: 'flex', gap: 16, padding: 16, background: '#fff', borderBottom: '1px solid #eee' }}>
-        {pages.map((p, i) => (
-          <button key={p.name} onClick={() => handleNav(i)} style={{ fontWeight: pageIdx === i ? 'bold' : undefined }}>
+        {pages.map((p) => (
+          <button key={p.hash} onClick={() => handleNav(p.hash)} style={{ fontWeight: pageHash === p.hash ? 'bold' : undefined }}>
             {p.name}
           </button>
         ))}
       </nav>
-      <div style={{ padding: 16 }}>{pages[pageIdx].component}</div>
+      <div style={{ padding: 16 }}>{pages.find(p => p.hash === pageHash)?.component}</div>
     </div>
   );
 }