Michael Young x Resend - Waitlist Component Library

https://www.npmjs.com/package/myoung-resend-waitlist

High-level Notes

All the relevant code for the Waitlist component is in the directory: src/components/waitlist

waitlist.tsx: The main component file that contains the Waitlist form.

actions.ts: Contains the server action that is responsible for making requests to the Resend API. If it is used in a client-side React app, the proxyUrl prop must be passed through.

Installation

# npm
npm install myoung-resend-waitlist -S

# pnpm
pnpm add myoung-resend-waitlist

Usage

The <Waitlist /> component can be used in a Next.js app router or pages router.

In Next.js App Router

Ensure your Next.js app has RESEND_API_KEY defined in your .env.local file. The component's built-in server action will use this key to access the Resend API.

import { Waitlist } from 'myoung-resend-waitlist';

import "myoung-resend-waitlist/styles.css";

...

<Waitlist
  audienceId={audienceId}
/>

In Next.js Pages Router / Client-side React app

In order to protect your Resend API key, you must pass a user-defined proxyUrl prop to the <Waitlist /> component.

The proxyUrl prop should be a URL that points to an API endpoint that has access to your Resend API key. The endpoint should be responsible for making the necessary requests to the Resend API.

import { Waitlist } from "myoung-resend-waitlist";

import "myoung-resend-waitlist/styles.css";

...

<Waitlist
  audienceId={audienceId}
  proxyUrl="<api proxy url that has access to Resend API key>"
/>

Props

| Prop | Type | Description | | ------------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | audienceId | string | Required. The Resend audience ID to use for the Waitlist component. | | proxyUrl | string | Required if you are using the component in a client-side React app. The URL of an API endpoint that has access to your Resend API key. | | variant | string | The variant of the Waitlist component. Options are dark and light. | | title | string | The title of the waitlist form. |

Development

Running Storybook

npm run storybook

Build Component Library

npm run build