https://github.com/kravetsone/elysia-react-router
Use Remix with Elysia with HMR support!
https://github.com/kravetsone/elysia-react-router
elysia elysia-plugin remix remix-run vitejs
Last synced: 3 months ago
JSON representation
Use Remix with Elysia with HMR support!
- Host: GitHub
- URL: https://github.com/kravetsone/elysia-react-router
- Owner: kravetsone
- License: mit
- Created: 2024-07-20T18:42:45.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-01-11T16:38:04.000Z (5 months ago)
- Last Synced: 2025-03-30T05:03:33.706Z (3 months ago)
- Topics: elysia, elysia-plugin, remix, remix-run, vitejs
- Language: TypeScript
- Homepage:
- Size: 682 KB
- Stars: 55
- Watchers: 1
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - kravetsone/elysia-react-router - Use Remix with Elysia with HMR support! (TypeScript)
README
# Elysia React Router and Remix
Use [React Router v7](https://reactrouter.com/home) or [Remix](https://remix.run/) with [Elysia](https://elysiajs.com/) with `HMR` support! Closes a long-standing elysia plugin request https://github.com/elysiajs/elysia/issues/12
> [!IMPORTANT]
>
> [Migration to React Router v7 from Remix](https://reactrouter.com/upgrading/remix).
### Usage with React Router
In `development` mode it uses [`vite`](https://vitejs.dev/guide/api-javascript.html) under the hood, and in `production` serves the build directory and performs SSR requests.
```ts
import { Elysia } from "elysia";
import { reactRouter } from "elysia-react-router";
new Elysia()
.use(await reactRouter())
.get("/some", "Hello, world!")
.listen(3000, console.log);
```
### Quick start
```bash
bun create react-router@latest --template kravetsone/elysia-react-router/example
```
### Options
| Key | Type | Default | Description |
| ---------------- | --------------------------------------------------------------- | --------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| mode? | "development" \| "production" | process.env.NODE_ENV \|\| "development" | In `development` mode it starts `vite`, and in `production` it just serves static and performs SSR requests. |
| basename? | string | "/" | The base path for the application. This should match the `basename` in your `vite` config. |
| buildDirectory? | string | "build" | The directory where the application is built. This should match the `buildDirectory` directory in your `vite` config. |
| serverBuildFile? | string | "index.js" | The server output filename. This should match the `serverBuildFile` filename in your `vite` config. |
| vite? | InlineConfig | | Configure `vite` server in `development` mode. |
| static? | [StaticOptions](https://elysiajs.com/plugins/static) | | Configure [static plugin](https://elysiajs.com/plugins/static) options in `production` mode |
| getLoadContext? | (context: Context) => AppLoadContext \| Promise | | A function that returns the value to use as `context` in route `loader` and `action` functions. |
### getLoadContext usage
In Elysia:
```ts
new Elysia()
.use(
await reactRouter({
getLoadContext: () => ({ hotPostName: "some post name" }),
})
)
.listen(port, console.log);
declare module "react-router" {
interface AppLoadContext {
hotPostName?: string;
}
}
```
In React Router:
```tsx
import { useLoaderData } from "react-router";
import type { Route } from "./+types/posts._index";
export const loader = async ({ context }: Route.LoaderArgs) => {
return {
...context,
posts: [
{
slug: "my-first-post",
title: "My First Post",
},
{
slug: "90s-mixtape",
title: "A Mixtape I Made Just For You",
},
],
};
};
export default function Posts() {
const { posts, hotPostName } = useLoaderData();
return (
Posts
🔥🔥 {hotPostName} 🔥🔥
-
{post.title}
{posts.map((post) => (
))}
);
}
```
### Using with Remix
The `remix` function is deprecated and will be reworked in future versions. Please use `reactRouter` for better compatibility and features. [More info on remix vs react-router v7]
(https://remix.run/blog/incremental-path-to-react-19)
The `remix` function has the same options and types as `reactRouter`. Example usage:
#### Install
```bash
bun i elysia-remix@latest @remix-run/node@latest
```
```ts
import { Elysia } from "elysia";
import { remix } from "elysia-remix";
new Elysia()
.use(await remix())
.get("/some", "Hello, world!")
.listen(3000, console.log);
```
> [!IMPORTANT]
> The Remix functionality will be reworked in future versions, as [Remix plans to release a new reworked version of the framework with new ideas under the old name `Remix`.](https://remix.run/blog/incremental-path-to-react-19)
### Re-exports
```ts
import { remix } from "elysia-remix";
import { reactRouter } from "elysia-remix/react-router";
```
```ts
import { reactRouter } from "elysia-react-router";
import { remix } from "elysia-react-router/remix";
```