npm package: @rapidnative/expo-router-react-router
Description: Expo Router API compatibility for React Router DOM
Author: Sanket Sahu
Latest version: 1.0.0

# Expo Router Compat

Expo Router API compatibility for React Router DOM. Use Expo Router's familiar API with React Router DOM under the hood.

## Installation

```bash
npm install @your-org/expo-router-compat
```

## Peer Dependencies

This package requires:

- `react` >= 16.8.0
- `react-router-dom` >= 6.0.0

## Features

- **LinkWrapper**: Drop-in replacement for Expo Router's `<Link>` component
- **useRouterWrapper**: Hook that provides the same API as Expo Router's `useRouter()`
- **Full TypeScript support**
- **Zero runtime dependencies** (uses peer dependencies)

## Usage

### LinkWrapper

```tsx
import { LinkWrapper } from '@your-org/expo-router-compat';

// Basic navigation
<LinkWrapper href="/about">Go to About</LinkWrapper>

// With parameters
<LinkWrapper href="/profile" params={{ id: 123 }}>
  Go to Profile
</LinkWrapper>

// asChild usage
<LinkWrapper href="/settings" asChild>
  <button>Settings</button>
</LinkWrapper>
```

### useRouterWrapper

```tsx
import { useRouterWrapper } from "@your-org/expo-router-compat";

function MyComponent() {
  const router = useRouterWrapper();

  return (
    <div>
      <button onClick={() => router.push("/profile")}>
        Navigate to Profile
      </button>
      <button onClick={() => router.replace("/settings")}>
        Replace with Settings
      </button>
      <button onClick={() => router.back()}>Go Back</button>
      <button onClick={() => router.setParams({ id: 42 })}>
        Set Param id=42
      </button>
    </div>
  );
}
```

## API Reference

### LinkWrapper Props

| Prop       | Type                                          | Description                                           |
| ---------- | --------------------------------------------- | ----------------------------------------------------- |
| `href`     | `string`                                      | The path to navigate to                               |
| `children` | `React.ReactNode`                             | Content to render inside the link                     |
| `replace`  | `boolean`                                     | Replace current history entry instead of pushing      |
| `push`     | `boolean`                                     | Not used in React Router (kept for API compatibility) |
| `params`   | `Record<string, string \| number \| boolean>` | Query parameters to append                            |
| `asChild`  | `boolean`                                     | Render as child component instead of anchor           |

### useRouterWrapper Return

| Method      | Type                                                            | Description                   |
| ----------- | --------------------------------------------------------------- | ----------------------------- |
| `push`      | `(href: string) => void`                                        | Navigate to a new route       |
| `replace`   | `(href: string) => void`                                        | Replace current route         |
| `back`      | `() => void`                                                    | Go back in history            |
| `setParams` | `(params: Record<string, string \| number \| boolean>) => void` | Update query parameters       |
| `prefetch`  | `(href: string) => Promise<void>`                               | No-op (for API compatibility) |
| `pathname`  | `string`                                                        | Current route pathname        |

## Migration from Expo Router

This package is designed to be a drop-in replacement for Expo Router's navigation components. Simply replace your imports:

```tsx
// Before (Expo Router)
import { Link, useRouter } from "expo-router";

// After (@your-org/expo-router-compat)
import {
  LinkWrapper as Link,
  useRouterWrapper as useRouter,
} from "@your-org/expo-router-compat";
```

## License

MIT