[2024.08.11] Page Router and React Router Dom Supported | Release 0.0.3 version

README.md

@@ -28,16 +28,41 @@ Many frameworks provide routers to change paths. Supporting all of this would be
 
 We aim for code that allows you to see at a glance how the funnel should behave.
 
+# Supported
+
+Currently officially supported are `next.js app router`, `next.js pages router`, `react-router-dom`.
+
+# Installation
+
+**nextjs app router**
+
+```
+npm i qs @xionhub/funnel-core @xionhub/funnel-client @xionhub/funnel-app-router-adapter
+```
+
+**nextjs pages router**
+
+```
+npm i qs @xionhub/funnel-core @xionhub/funnel-client @xionhub/funnel-pages-router-adapter
+```
+
+**react-router-dom**
+
+```
+npm i qs @xionhub/funnel-core @xionhub/funnel-client @xionhub/funnel-react-router-dom-adapter
+```
+
 # Quick Start
 
 ## next.js app router
 
 ### Requirements
 
 ```
-qs : ^6
-next : ^13
-react : ^16
+qs : >=6
+next : >=13
+react : >=16.8
+react-dom : >=16.8
 ```
 
 ### Installation
@@ -250,6 +275,8 @@ Using createStep, you can create, delete, or update the query string for the nex
 
 ## Funnel Client
 
+Funnel Client provides utility functions to help manage query string funnels.
+
 ### FunnelClient.createStep
 
 ```tsx
@@ -351,6 +378,10 @@ export const NestedFunnel = () => {
 
 [App Router Example](https://github.com/XionWCFM/funnel/tree/main/apps/app-router-example)
 
+[Pages Router Example](https://github.com/XionWCFM/funnel/tree/main/apps/pages-router-example)
+
+[React Router Dom Example](https://github.com/XionWCFM/funnel/tree/main/apps/react-router-example)
+
 # License
 
 Licensed under the MIT license.

apps/pages-router-example/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/pages-router-example/README.md

@@ -0,0 +1,40 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

apps/pages-router-example/next.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+export default nextConfig;