myoung-resend-waitlist

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