Overview

Utilities for using react with react-router 7 + effect-ts

For any question please open an issue.

Install

$ npm i @kattsushi/effect-react-router

Usage

// lib/server-runtime.ts

import { makeRuntime } from "@kattsushi/effect-react-router";
const layers = Layer.empty

export const { withLoaderEffect, withActionEffect } = makeRuntime(layers)

// routes/home.tsx

import type * as Route from "./+types.home";
import { Ok, LoaderArgsContext } from "@kattsushi/effect-react-router";
import { withLoaderEffect } from "~/lib/server-runtime";
import * as T from "effect/Effect" 

export const loader = withLoaderEffect(
  T.gen(function* () {
    const { request } = yield* LoaderArgsContext
    yield* T.log("request", request)
    return yield* T.succeed(new Ok({ data: { hellow: 'world' }}))
  })
)

export default function Home({ loaderData }: Route.ComponentProps) {
  return (
    <div>
      <h1>Home</h1>
      <pre>{JSON.stringify(loaderData.data, null, 2)}</pre>
    </div>
  )
}

License

This project is under MIT license. You can freely use it for your own purposes.