diff --git a/README.md b/README.md index 134eb2f..26652d0 100644 --- a/README.md +++ b/README.md @@ -66,7 +66,7 @@ const jsonString = superjson.stringify({ date: new Date(0) }); And parse your JSON like so: -```js +```ts const object = superjson.parse<{ date: Date }>(jsonString); // object === { date: new Date(0) } @@ -108,7 +108,7 @@ meta = { ## Using with Next.js -The `getServerSideProps`, `getInitialProps`, and `getStaticProps` data hooks provided by Next.js do not allow you to transmit Javascript objects like Dates. It will error unless you convert Dates to strings, etc. +The `getServerSideProps`, `getInitialProps`, and `getStaticProps` data hooks provided by Next.js do not allow you to transmit JavaScript objects like Dates. It will error unless you convert Dates to strings, etc. Thankfully, Superjson is a perfect tool to bypass that limitation! @@ -132,6 +132,23 @@ Add the plugin to your .babelrc. If you don't have one, create it. Done! Now you can safely use all JS datatypes in your `getServerSideProps` / etc. . +## Using with Remix + +Remix's `json` helper and `useLoaderData` hook doesn't allow you to transmit JavaScript objects like Dates. [`superjson-remix`](https://github.com/donavon/superjson-remix) is a thin wrapper around `superjson` that allows you to use it with Remix. + +Change the import to `superjson-remix` and you're good to go! + +```diff +- import { json, useLoaderData } from 'remix'; ++ import { json, useLoaderData } from 'superjson-remix';import +``` + +Install the library with your package manager of choice, e.g.: + +```sh +yarn add superjson-remix +``` + ## API ### serialize @@ -204,19 +221,19 @@ Superjson supports many extra types which JSON does not. You can serialize all t | type | supported by standard JSON? | supported by Superjson? | | ----------- | --------------------------- | ----------------------- | -| `string` | ✅ | ✅ | -| `number` | ✅ | ✅ | -| `boolean` | ✅ | ✅ | -| `null` | ✅ | ✅ | -| `Array` | ✅ | ✅ | -| `Object` | ✅ | ✅ | -| `undefined` | ❌ | ✅ | -| `bigint` | ❌ | ✅ | -| `Date` | ❌ | ✅ | -| `RegExp` | ❌ | ✅ | -| `Set` | ❌ | ✅ | -| `Map` | ❌ | ✅ | -| `Error` | ❌ | ✅ | +| `string` | ✅ | ✅ | +| `number` | ✅ | ✅ | +| `boolean` | ✅ | ✅ | +| `null` | ✅ | ✅ | +| `Array` | ✅ | ✅ | +| `Object` | ✅ | ✅ | +| `undefined` | ❌ | ✅ | +| `bigint` | ❌ | ✅ | +| `Date` | ❌ | ✅ | +| `RegExp` | ❌ | ✅ | +| `Set` | ❌ | ✅ | +| `Map` | ❌ | ✅ | +| `Error` | ❌ | ✅ | ## Recipes @@ -229,20 +246,18 @@ In a Next.js project, `_app.ts` would be a good spot for that. ### `Decimal.js` / `Prisma.Decimal` ```ts -import { Decimal } from "decimal.js" +import { Decimal } from 'decimal.js'; SuperJSON.registerCustom( { isApplicable: (v): v is Decimal => Decimal.isDecimal(v), - serialize: v => v.toJSON(), - deserialize: v => new Decimal(v), + serialize: (v) => v.toJSON(), + deserialize: (v) => new Decimal(v), }, 'decimal.js' ); ``` - - ## Contributors ✨ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):