Skip to content

Commit 6cb65db

Browse files
prasanthreactprasanthreact
committed
prettier format added
1 parent f50cf36 commit 6cb65db

File tree

13 files changed

+243
-116
lines changed

13 files changed

+243
-116
lines changed

‎README.md‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ Built for **React Router DOM** + **Vite** — simple, fast, familiar.
3232
✅ Fully type-safe (TypeScript supported)
3333

3434
---
35+
3536
# Live Demo
3637

3738
Try it on StackBlitz:
@@ -71,7 +72,6 @@ src/
7172
├── loading.jsx # Loading component (renders while loading)
7273
```
7374

74-
7575
> You can `loader.jsx` alongside any `page.jsx` to fetch data before rendering the page.
7676
> Add a `app/loading.jsx` file to show a loading UI while the loader is running.
7777
@@ -80,13 +80,15 @@ src/
8080
## 🚀 Usage
8181

8282
Example `src/app/page.jsx`:
83+
8384
```jsx
8485
export default function Home({ data }) {
8586
return <h1>Home Page {data && <span>{data.message}</span>}</h1>;
8687
}
8788
```
8889

8990
Example `src/app/layout.jsx`:
91+
9092
```jsx
9193
export default function RootLayout({ children }) {
9294
return (
@@ -99,24 +101,24 @@ export default function RootLayout({ children }) {
99101
```
100102

101103
Example `src/app/loader.jsx`:
104+
102105
```js
103106
// This loader runs before the sibling page.jsx and its return value is passed as the 'data' prop
104107
export default async function loader() {
105108
// You can fetch from any API or return any data
106-
const res = await fetch('https://api.example.com/message');
109+
const res = await fetch("https://api.example.com/message");
107110
const data = await res.json();
108111
return { message: data.message };
109112
}
110113
```
111114

112115
Example `src/App.jsx`:
116+
113117
```jsx
114118
import { AppRouter } from "react-next-router";
115119

116120
function App() {
117-
return (
118-
<AppRouter />
119-
);
121+
return <AppRouter />;
120122
}
121123
export default App;
122124
```
@@ -125,18 +127,18 @@ export default App;
125127

126128
## 🔍 Dynamic Routing
127129

128-
| File | URL Pattern |
129-
| ----------------------------- | ------------------------ |
130-
| `app/page.jsx` | `/` |
131-
| `app/about/page.jsx` | `/about` |
132-
| `app/blog/[slug]/page.jsx` | `/blog/:slug` |
133-
| `app/blog/[...slug]/page.jsx` | `/blog/*` (catch-all) |
134-
| `app/blog/[[slug]]/page.jsx` | `/blog` (optional param) |
135-
| `app/blog/[slug]/loader.jsx` | Data loader for `/blog/:slug` |
130+
| File | URL Pattern |
131+
| ----------------------------- | -------------------------------- |
132+
| `app/page.jsx` | `/` |
133+
| `app/about/page.jsx` | `/about` |
134+
| `app/blog/[slug]/page.jsx` | `/blog/:slug` |
135+
| `app/blog/[...slug]/page.jsx` | `/blog/*` (catch-all) |
136+
| `app/blog/[[slug]]/page.jsx` | `/blog` (optional param) |
137+
| `app/blog/[slug]/loader.jsx` | Data loader for `/blog/:slug` |
136138
| `app/loading.jsx` | Loading UI while data is fetched |
137139

138-
139140
## 🧪 useAppRouter Hook
141+
140142
You can now use the useAppRouter() hook to get a JSON structure of all matched routes. This is useful when you want to inspect or manipulate the route config manually — for example, inside a custom RouterProvider or createBrowserRouter setup.
141143

142144
```jsx
@@ -207,6 +209,7 @@ app/
207209
Add a `loader.jsx` file alongside any `page.jsx` to fetch data before rendering the page. The returned value will be passed as the `data` prop to the sibling `page.jsx` component.
208210

209211
Example:
212+
210213
```
211214
app/
212215
└── about/
@@ -232,4 +235,3 @@ Inspired by **Next.js App Router** and built with **React Router DOM** + **Vite*
232235

233236
- [NPM Package](https://www.npmjs.com/package/react-next-router)
234237
- [GitHub Repo](https://github.com/prasanthreact/react-next-router)
235-

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />

‎package-lock.json‎

Lines changed: 97 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"type": "module",
99
"scripts": {
1010
"example": "vite",
11+
"format": "prettier --write .",
1112
"rollup": "rm -rf dist && rollup -c --bundleConfigAsCjs",
1213
"patch": "npm version patch"
1314
},
@@ -27,6 +28,8 @@
2728
"@types/react": "^19.1.8",
2829
"@types/react-dom": "^19.1.6",
2930
"@vitejs/plugin-react": "^4.6.0",
31+
"prettier": "^3.6.1",
32+
"prettier-plugin-tailwindcss": "^0.6.13",
3033
"react": "^19.1.0",
3134
"react-dom": "^19.1.0",
3235
"react-router-dom": "^7.6.2",

‎src/app/blog/[...slug]/page.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,21 @@ import { useNextParams } from "../../../package/hooks/useParams";
33
const DynamicRoutePage = () => {
44
const params = useNextParams();
55
console.log(params);
6-
return <div>DynamicRoutePage</div>;
6+
return (
7+
<div
8+
style={{
9+
display: "flex",
10+
flexDirection: "column",
11+
alignItems: "center",
12+
justifyContent: "center",
13+
minHeight: "80vh",
14+
}}
15+
>
16+
<h1>Dynamic Route Page</h1>
17+
<p>This page displays the dynamic route parameters:</p>
18+
<pre>{JSON.stringify(params, null, 2)}</pre>
19+
</div>
20+
);
721
};
822

923
export default DynamicRoutePage;

‎src/app/blog/[id]/loader.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
const FetchLoad = async ({ params }) => {
22
const data = await fetch(
3-
`https://jsonplaceholder.typicode.com/todos/${params.id}`
3+
`https://jsonplaceholder.typicode.com/todos/${params.id}`,
44
);
55
const json = await data.json();
66
console.log(json);

‎src/app/blog/[id]/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default function BlogPost({ data }) {
1919

2020
const relatedPosts = blogPosts
2121
.filter(
22-
(p) => p.id !== post.id && p.tags.some((tag) => post.tags.includes(tag))
22+
(p) => p.id !== post.id && p.tags.some((tag) => post.tags.includes(tag)),
2323
)
2424
.slice(0, 3);
2525

‎src/components/BlogCard.tsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React from 'react';
2-
import { Link } from 'react-router-dom';
3-
import { Calendar, Clock, User, ArrowRight } from 'lucide-react';
4-
import { BlogPost } from '../data/blogData';
1+
import React from "react";
2+
import { Link } from "react-router-dom";
3+
import { Calendar, Clock, User, ArrowRight } from "lucide-react";
4+
import { BlogPost } from "../data/blogData";
55

66
interface BlogCardProps {
77
post: BlogPost;
@@ -12,15 +12,15 @@ export default function BlogCard({ post, featured = false }: BlogCardProps) {
1212
return (
1313
<article
1414
className={`group relative overflow-hidden rounded-2xl bg-white shadow-sm hover:shadow-xl transition-all duration-300 ${
15-
featured ? 'md:col-span-2 md:row-span-2' : ''
15+
featured ? "md:col-span-2 md:row-span-2" : ""
1616
}`}
1717
>
1818
<div className="relative overflow-hidden">
1919
<img
2020
src={post.image}
2121
alt={post.title}
2222
className={`w-full object-cover group-hover:scale-105 transition-transform duration-500 ${
23-
featured ? 'h-64 md:h-80' : 'h-48'
23+
featured ? "h-64 md:h-80" : "h-48"
2424
}`}
2525
/>
2626
<div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
@@ -33,7 +33,7 @@ export default function BlogCard({ post, featured = false }: BlogCardProps) {
3333
)}
3434
</div>
3535

36-
<div className={`p-6 ${featured ? 'md:p-8' : ''}`}>
36+
<div className={`p-6 ${featured ? "md:p-8" : ""}`}>
3737
{/* Tags */}
3838
<div className="flex flex-wrap gap-2 mb-3">
3939
{post.tags.slice(0, 2).map((tag) => (
@@ -49,7 +49,9 @@ export default function BlogCard({ post, featured = false }: BlogCardProps) {
4949
{/* Title */}
5050
<h2
5151
className={`font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors duration-200 ${
52-
featured ? 'text-2xl md:text-3xl leading-tight' : 'text-xl leading-tight'
52+
featured
53+
? "text-2xl md:text-3xl leading-tight"
54+
: "text-xl leading-tight"
5355
}`}
5456
>
5557
<Link to={`/blog/${post.id}`} className="hover:underline">
@@ -60,7 +62,7 @@ export default function BlogCard({ post, featured = false }: BlogCardProps) {
6062
{/* Excerpt */}
6163
<p
6264
className={`text-gray-600 mb-4 leading-relaxed ${
63-
featured ? 'text-lg' : 'text-base'
65+
featured ? "text-lg" : "text-base"
6466
}`}
6567
>
6668
{post.excerpt}
@@ -94,4 +96,4 @@ export default function BlogCard({ post, featured = false }: BlogCardProps) {
9496
</div>
9597
</article>
9698
);
97-
}
99+
}

0 commit comments

Comments
 (0)