Skip to content

Commit b462825

Browse files
committed
fix readme
1 parent 62d7c72 commit b462825

File tree

4 files changed

+103
-7
lines changed

4 files changed

+103
-7
lines changed

README.md

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<!-- <p align="center">
2+
<img src="./assets/remix-dev-tools.png" style="display: block; margin: 0 auto;" align="middle" height="240" alt="react-router-devtools" />
3+
</p> -->
4+
5+
# react-router-devtools
6+
7+
![GitHub Repo stars](https://img.shields.io/github/stars/forge-42/react-router-devtools?style=social)
8+
![npm](https://img.shields.io/npm/v/react-router-devtools?style=plastic)
9+
![GitHub](https://img.shields.io/github/license/forge-42/react-router-devtools?style=plastic)
10+
![npm](https://img.shields.io/npm/dy/react-router-devtools?style=plastic)
11+
![npm](https://img.shields.io/npm/dw/react-router-devtools?style=plastic)
12+
![GitHub top language](https://img.shields.io/github/languages/top/forge-42/react-router-devtools?style=plastic)
13+
14+
<img src="./assets/rrd-mascott.png" style="display: block; margin: 0 auto;" align="right" height="240" alt="react-router-devtools" />
15+
16+
react-router-devtools is an open-source package designed to enhance your development workflow when working with React Router v7+, a full-stack JavaScript framework for building web applications. This package provides a user-friendly interface consisting of three tabs, **Active Page**, **Terminal**, **Settings**, **Errors**, **Network** and **Routes**, along with a side tab called **Timeline**. With react-router-devtools, you can efficiently monitor and manage various aspects of your React Router v7+ projects, including page information, URL parameters, server responses, loader data, routes, and more.
17+
18+
19+
You can also track down hydration issues with the **Errors** tab and view your routes in a tree/list view with the **Routes** tab.
20+
21+
22+
**Network** tab is a powerful tool for tracing all your network requests and see what's happening under the hood. You can see all the requests in real-time, with the ability to see if they are aborted, if they are cached, and if they are successful or not.
23+
24+
### Remix Development Tools
25+
26+
This repository used to be called remix-development-tools, but we decided to rename it to react-router-devtools to better reflect the fact that it's a package for React Router v7+ and not just for Remix.
27+
28+
If you're looking for the old version of this package, you can find it [here](https://github.com/forge-42/react-router-devtools/tree/remix-development-tools).
29+
30+
And the detailed documentation can be found [here](https://remix-development-tools.fly.dev/).
31+
32+
# Documentation
33+
34+
Detailed documentation can be found here:
35+
36+
https://remix-development-tools.fly.dev/
37+
38+
39+
## Getting Started
40+
41+
1. Install the package via npm:
42+
43+
```bash
44+
npm install react-router-devtools -D
45+
```
46+
47+
```js
48+
import { reactRouterDevTools } from "react-router-devtools";
49+
50+
// Add it to your plugins array in vite.config.js
51+
export default defineConfig({
52+
plugins: [reactRouterDevTools(), reactRouter(), tsconfigPaths()],
53+
});
54+
```
55+
56+
That's it, you're done!
57+
58+
### CloudFlare
59+
60+
If you're trying to spin it up on CF, try adding this to your `optimizeDeps` in your `vite.config.js` file:
61+
```ts
62+
optimizeDeps: {
63+
include: [
64+
// other optimized deps
65+
"beautify",
66+
"react-diff-viewer-continued",
67+
"classnames",
68+
"@bkrem/react-transition-group",
69+
],
70+
},
71+
```
72+
73+
## Support
74+
75+
If you like react-router-devtools consider starring the repository or donating via Github sponsors. If you have any questions, comments, or suggestions, please feel free to reach out!
76+
77+
## License
78+
79+
react-router-devtools is open-source software released under the [MIT License](https://opensource.org/licenses/MIT).
80+
81+
## Acknowledgments
82+
83+
React Router Devtools was inspired by the React Router v7 and aims to enhance the development experience for React Router v7+ users.
84+
85+
Feel free to explore React Router Devtools, and we hope it significantly improves your React Router development process. If you encounter any issues or have suggestions for enhancements, please don't hesitate to open an issue on our GitHub repository. Happy Remixing!
86+
87+
## Thanks
88+
89+
Thanks to all the contributors on this project and the support to the community. You guys are awesome!
90+
91+
---
92+
93+
Devoted to my loving wife and my little late bird Kiira who helped me initially build out these tools by keeping me company and being my rubber duck, she will forever be my best friend.
94+
95+
In loving memory of my late Grandfather, who taught me to always be curious, never stop learning, and to always be kind to others, and my late Grandmother who always encouraged me to learn new things, and stand up for the things I believe in.

docs/package.json

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@
8383
"npm-run-all": "4.1.5",
8484
"playwright": "1.50.1",
8585
"prompt": "1.3.0",
86-
"react-router-devtools": "^5.1.3",
86+
"react-router-devtools": "^5.1.3",
8787
"tailwindcss": "4.0.9",
8888
"tsx": "4.19.2",
8989
"typescript": "^5.8.3",
@@ -103,6 +103,9 @@
103103
"pnpm": ">=10.18.0"
104104
},
105105
"pnpm": {
106-
"onlyBuiltDependencies": ["esbuild", "msw"]
106+
"onlyBuiltDependencies": [
107+
"esbuild",
108+
"msw"
109+
]
107110
}
108-
}
111+
}

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
"local-release": "changeset version && changeset publish",
4444
"version": "changeset version",
4545
"test:unused": "knip",
46-
"test:deps": "sherif -i tailwindcss",
46+
"test:deps": "sherif -i react-router-devtools -i tailwindcss",
4747
"watch": "pnpm run build:all && nx watch --all -- pnpm run build:all"
4848
},
4949
"license": "MIT",

packages/react-router-devtools/package.json

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,9 +59,7 @@
5959
"require": "./dist/client.css"
6060
}
6161
},
62-
"files": [
63-
"dist"
64-
],
62+
"files": ["dist"],
6563
"repository": {
6664
"type": "git",
6765
"url": "git+https://github.com/forge-42/react-router-devtools.git"

0 commit comments

Comments
 (0)