Remove Next from peer dependencies

README.md

@@ -92,6 +92,32 @@ You can also pass a `Wrapper` to the `<URLModal>` component which will wrap all
 />
 ```
 
+By default, this package uses the default `history` API used by browsers. If you want to use a custom router either from `react-router` or `Next.js`, you render the `URLModal` component as follows:
+
+```tsx
+import Router from 'next/router';
+import { URLModal } from 'react-url-modal';
+import { CreateAccount, EditAccount } from './Modals';
+
+const customRouterAction = ({ href, replace }) => {
+  if (replace) {
+    Router.replace(href, undefined, { shallow: true });
+  } else {
+    Router.push(href, undefined, { shallow: true });
+  }
+};
+
+export const App = () => (
+  <URLModal
+    modals={{
+      createAccount: CreateAccount,
+      editAccount: EditAccount,
+    }}
+    customRouterAction={customRouterAction}
+  />
+);
+```
+
 To see all the available props, please check the API reference below.
 
 ## API Reference
@@ -106,13 +132,13 @@ To see all the available props, please check the API reference below.
 />
 ```
 
-| Parameter       | Type                                                    | Description                                                     |
-| :-------------- | :------------------------------------------------------ | :-------------------------------------------------------------- |
-| `modals`        | `[name: string]: React Component or Promise<Component>` | **Required**                                                    |
-| `Wrapper`       | `React Component`                                       | A component to wrap each modal with                             |
-| `usePortal`     | `boolean`                                               | Should this modal be mounted on a portal                        |
-| `portalElement` | `HTML Element`                                          | A component to mount the modals in, defaults to body            |
-| `adapter`       | `null or "nextjs"`                                      | If set to NextJS it will use next router instead of history API |
+| Parameter            | Type                                                     | Description                                                                                                                       |
+| :------------------- | :------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------- |
+| `modals`             | `[name: string]: React Component or Promise<Component>`  | **Required**                                                                                                                      |
+| `Wrapper`            | `React Component`                                        | A component to wrap each modal with                                                                                               |
+| `usePortal`          | `boolean`                                                | Should this modal be mounted on a portal                                                                                          |
+| `portalElement`      | `HTML Element`                                           | A component to mount the modals in, defaults to body                                                                              |
+| `customRouterAction` | `(params: { href: string; replace?: boolean; }) => void` | A custom function that can be used to override the default URL behavior. Use this to integrate with routers from Next.js or Remix |
 
 #### openModal
 
@@ -189,7 +215,7 @@ Go to the project directory
 Install dependencies
 
 ```bash
-  yarn && yarn add next --peer
+  yarn
 ```
 
 Start the server

example/package.json

@@ -1,27 +1,27 @@
 {
   "name": "example-react-url-modal",
-  "version": "0.0.0",
+  "private": true,
   "scripts": {
     "dev": "vite --port 3002",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tailwindcss/forms": "^0.4.0",
-    "autoprefixer": "^10.4.2",
-    "classnames": "^2.3.1",
+    "@tailwindcss/forms": "^0.5.6",
+    "autoprefixer": "^10.4.16",
+    "classnames": "^2.3.2",
     "clipboard-copy": "^4.0.1",
-    "postcss": "^8.4.5",
-    "prism-react-renderer": "^1.2.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "tailwindcss": "^3.0.18"
+    "postcss": "^8.4.30",
+    "prism-react-renderer": "^2.0.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwindcss": "^3.3.3"
   },
   "devDependencies": {
-    "@types/react": "^17.0.33",
-    "@types/react-dom": "^17.0.10",
-    "@vitejs/plugin-react": "^1.0.7",
-    "typescript": "^4.4.4",
-    "vite": "^2.7.2"
+    "@types/react": "^18.2.22",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react": "^4.0.4",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9"
   }
 }

example/src/components/Code.tsx

@@ -1,5 +1,4 @@
-import Highlight, { defaultProps } from 'prism-react-renderer';
-import theme from 'prism-react-renderer/themes/nightOwl';
+import { Highlight, themes } from 'prism-react-renderer';
 import clipboardCopy from 'clipboard-copy';
 import { CopyIcon } from './Icons';
 
@@ -13,7 +12,7 @@ export const Code = ({ code }: { code: string }) => (
     >
       <CopyIcon />
     </button>
-    <Highlight {...defaultProps} code={code} theme={theme} language="jsx">
+    <Highlight code={code} theme={themes.nightOwl} language="jsx">
       {({ className, tokens, getLineProps, getTokenProps }) => (
         <pre className={`${className} p-4 text-sm`}>
           {tokens.map((line, i) => (

example/src/components/Examples.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { openModal, URLModal } from 'react-url-modal';
 import { Modal } from 'react-url-modal/Modal';
+
 const StandardModalContent = () => <>No params! Simple stuff</>;
 
 const ModalWithParams = ({ params }: { params: { [key: string]: string } }) => (

example/src/components/Modals/Modal3.tsx

@@ -1,5 +1,5 @@
 import { Modal } from 'react-url-modal/Modal';
 
-export default function Modal3(props: unknown) {
+export default function Modal3(props: any) {
   return <Modal {...props}>I am loaded from another file</Modal>;
 }

example/tsconfig.json

@@ -4,7 +4,7 @@
     "useDefineForClassFields": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "allowJs": false,
-    "skipLibCheck": false,
+    "skipLibCheck": true,
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
     "strict": true,

example/vite.config.ts

@@ -16,14 +16,6 @@ export default defineConfig({
       },
     ],
   },
-  optimizeDeps: {
-    exclude: ['next/router'],
-  },
-  build: {
-    rollupOptions: {
-      external: ['next/router'],
-    },
-  },
   server: {
     fs: {
       // Allow serving files from one level up to the project root