Update README.md

README.md

@@ -1,3 +1,92 @@
 # svelte-router
 
-Simple router for vite+svelte
+Simple router for vite+svelte
+
+# Usage
+
+
+App.svelte
+```svelte
+<script lang="ts">
+    import Router, { route } from './lib/Router.svelte';
+    import TodosPage from './pages/TodosPage.svelte';
+    import TodoPage from './pages/TodoPage.svelte';
+
+    route('/', TodosPage);
+    route('/[id]', TodoPage);
+</script>
+
+<Router>
+    {#snippet notfound()}
+        <h1>Not found</h1>
+        <p>Sorry, the page you are looking for does not exist.</p>
+        <p>Return to <a href="/">home</a>.</p>
+    {/snippet}
+</Router>
+```
+
+TodoPage.svelte
+```svelte
+<script lang="ts">
+    import { paramNumber } from '../lib/Router.svelte';
+
+    const id = $derived(paramNumber('id'));
+
+    async function getTodos() {
+        return await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`).then((res) => res.json());
+    }
+</script>
+
+{#await getTodos()}
+    <div>loading...</div>
+{:then todo}
+    <h1>
+        {todo.title}
+    </h1>
+    <label>
+        Completed
+        <input type="checkbox" checked={todo.completed} />
+    </label>
+{/await}
+```
+
+TodosPage.svelte
+```svelte
+<script lang="ts">
+    import { queryNumber } from '../lib/Router.svelte';
+
+    const page = $derived(queryNumber('page', 1));
+    const limit = $derived(queryNumber('limit', 5));
+
+    async function getTodos() {
+        return await fetch(`https://jsonplaceholder.typicode.com/todos?_page=${page}&_limit=${limit}`).then((res) => res.json());
+    }
+</script>
+
+<h1>Todos</h1>
+
+<div>
+    Items per page
+    <a href="?page={page}&limit=5">5</a>
+    <a href="?page={page}&limit=10">10</a>
+    <a href="?page={page}&limit=25">25</a>
+</div>
+
+{#await getTodos()}
+    <div>loading...</div>
+{:then data}
+    <ul>
+        {#each data as todo}
+            <li>
+                <a href="/{todo.id}">{todo.title}</a>
+            </li>
+        {/each}
+    </ul>
+{/await}
+
+<div>
+    <a href="?page={Math.max(1, page - 1)}&limit={limit}">prev page</a>
+    <span>page {page}</span>
+    <a href="?page={page + 1}&limit={limit}">next page</a>
+</div>
+```