Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sjc5/remix-easy-mode
Simple, typesafe toolkit for developing highly interactive Remix apps. Inspired by TRPC.
https://github.com/sjc5/remix-easy-mode
actions bouncer forms middleware react react-query remix trpc typesafe typescript validations zod
Last synced: 3 months ago
JSON representation
Simple, typesafe toolkit for developing highly interactive Remix apps. Inspired by TRPC.
- Host: GitHub
- URL: https://github.com/sjc5/remix-easy-mode
- Owner: sjc5
- License: mit
- Created: 2023-04-04T16:14:53.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-01T22:36:22.000Z (about 1 year ago)
- Last Synced: 2024-04-26T14:06:02.670Z (9 months ago)
- Topics: actions, bouncer, forms, middleware, react, react-query, remix, trpc, typesafe, typescript, validations, zod
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/remix-easy-mode
- Size: 699 KB
- Stars: 77
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Remix Easy Mode
Simple, typesafe toolkit for developing highly interactive Remix apps
## Features
- 100% typesafe
- Built on zod
- Inspired by TRPC
- Designed for building highly interactive apps
- Bone-simple client form validations
- Server-side input validations _a la_ TRPC
- Session middleware via "bouncer" pattern
- `onSuccess`, `onError`, and `onSettled` mutation callbacks _a la_ react-query
- Input helpers are unstyled (and polymorphic, if you want to supply your own input components)
- Optional custom serializers (_e.g._, `superjson`)
- MIT licensed
## Installation
```bash
npm i remix-easy-mode zod
```
## Usage
### Resource Route
```tsx
import type { DataFunctionArgs } from "@remix-run/server-runtime"
import { dataFunctionHelper, useAction } from "remix-easy-mode"
import { z } from "zod"
const schema = z.object({
someUserInput: z.string(),
})
// this is like a TRPC procedure
export const action = (ctx: DataFunctionArgs) => {
return dataFunctionHelper({
ctx,
schema,
bouncer: async ({ ctx, csrfToken }) => {
// (1) throw error or (2) return user session
},
fn: async ({ input, session }) => console.log({ input, session }), // typesafe!,
})
}
// return hook from your resource route to use on client
export function useExample() {
return useAction({
path: "/resource-route",
schema,
onSuccess: (res) => console.log(res), // typesafe!,
})
}
```
### Client-side Form
```tsx
import { InputHelper } from "remix-easy-mode"
import { useExample } from "./resource-route"
import { StyledInput } from "./your-custom-input-component"
export default function Index() {
const { Form, fields } = useExample()
return (
console.log(res)} // typesafe!
>
Submit
)
}
```
## Example App
To run the example app:
```bash
pnpm install
cd packages/example
pnpm run dev
```
Then visit `localhost:3000`.
## Peer Dependencies
`react`, `@remix-run/react`, `@remix-run/server-runtime`, `zod`
## Disclaimer
This is a work in progress. It's not yet battle-tested, and the pre-1.0.0 API will change without notice. If you want to use this in production, be careful, and set your dependency to a specific version.