diff --git a/docs/components/waitlist/overview.mdx b/docs/components/waitlist/overview.mdx new file mode 100644 index 0000000000..008b4fd6a0 --- /dev/null +++ b/docs/components/waitlist/overview.mdx @@ -0,0 +1,346 @@ +--- +title: '`` component' +description: Clerk's component is used to render a waitlist form that allows users to join for early access to your application. +--- + +![Clerk's \ component is used to render a waitlist form that allows users to join for early access to your application.](/docs/images/ui-components/waitlist.svg) + +Clerk's `` component is used to render a waitlist form that allows users to join for early access to your application. + +## Properties + +All props are optional. + + + - `appearance` + - [Appearance](/docs/customization/overview) | undefined + + Optional object to style your components. Will only affect [Clerk components](/docs/components/overview) and not [Account Portal](/docs/customization/account-portal/overview) pages. + + --- + + - `afterJoinWaitlistUrl` + - `string` + + Full URL or path to navigate after join waitlist. + + --- + + - `signInUrl` + - `string` + + Full URL or path where the SignIn component is mounted. + + +## Usage with frameworks + +The following example includes a basic implementation of the `` component. You can use this as a starting point for your own implementation. + + + + + ```jsx {{ filename: '/app/waitlist/[[...waitlist]]/page.tsx' }} + import { Waitlist } from '@clerk/nextjs' + + export default function WaitlistPage() { + return + } + ``` + + ```jsx {{ filename: '/pages/waitlist/[[...index]].tsx' }} + import { Waitlist } from '@clerk/nextjs' + + export default function WaitlistPage() { + return + } + ``` + + + + + ```jsx {{ filename: '/waitlist.tsx' }} + import { Waitlist } from '@clerk/clerk-react' + + export default function WaitlistPage() { + return + } + ``` + + + +## Usage with JavaScript + +The following methods available on an instance of the [`Clerk`](/docs/references/javascript/clerk/clerk) class are used to render and control the `` component: + +- [`mountWaitlist`](#mount-waitlist) +- [`unmountWaitlist`](#unmount-waitlist) +- [`openWaitlist`](#open-waitlist) +- [`closeWaitlist`](#close-waitlist) + +The following examples assume that you have followed the [quickstart](/docs/quickstarts/javascript) in order to add Clerk to your JavaScript application. + +### mountWaitlist() + +Render the `` component to an HTML `
` element. + +```typescript +function mountWaitlist(node: HTMLDivElement, props?: WaitlistProps): void +``` + +### mountWaitlist() params + + + - `node` + - [`HTMLDivElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement) + + The `
` element used to render in the `` component + + --- + + - `props?` + - [`WaitlistProps`](#properties) + + The properties to pass to the `` component + + +#### `mountWaitlist()` usage + +']}> + ```js {{ filename: 'main.js', mark: [13] }} + import { Clerk } from '@clerk/clerk-js' + + // Initialize Clerk with your Clerk publishable key + const clerk = new Clerk('{{pub_key}}') + await clerk.load() + + document.getElementById('app').innerHTML = ` +
+ ` + + const waitlistDiv = document.getElementById('waitlist') + + clerk.mountWaitlist(waitlistDiv) + ``` + + ```html {{ filename: 'index.html', mark: [20] }} + +
+ + + + + + ``` + + +### unmountWaitlist() + +Unmount and run cleanup on an existing `` component instance. + +```typescript +function unmountWaitlist(node: HTMLDivElement): void +``` + +#### `unmountWaitlist()` params + + + - `node` + - [`HTMLDivElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement) + + The container `
` element with a rendered `` component instance + + +#### `unmountWaitlist()` usage + +']}> + ```js {{ filename: 'main.js', mark: [17] }} + import { Clerk } from '@clerk/clerk-js' + + // Initialize Clerk with your Clerk publishable key + const clerk = new Clerk('{{pub_key}}') + await clerk.load() + + document.getElementById('app').innerHTML = ` +
+ ` + + const waitlistDiv = document.getElementById('waitlist') + + clerk.mountWaitlist(waitlistDiv) + + // ... + + clerk.unmountWaitlist(waitlistDiv) + ``` + + ```html {{ filename: 'index.html', mark: [24] }} + +
+ + + + + + ``` + + +### `openWaitlist()` + +Opens the `` component as an overlay at the root of your HTML `body` element. + +```typescript +function openWaitlist(props?: WaitlistProps): void +``` + +#### `openWaitlist()` params + + + - `props?` + - [`WaitlistProps`](#properties) + + The properties to pass to the `` component + + +#### `openWaitlist()` usage + +']}> + ```js {{ filename: 'main.js', mark: [13] }} + import { Clerk } from '@clerk/clerk-js' + + // Initialize Clerk with your Clerk publishable key + const clerk = new Clerk('{{pub_key}}') + await clerk.load() + + document.getElementById('app').innerHTML = ` +
+ ` + + const waitlistDiv = document.getElementById('waitlist') + + clerk.openWaitlist(waitlistDiv) + ``` + + ```html {{ filename: 'index.html', mark: [20] }} + +
+ + + + + + ``` + + +### `closeWaitlist()` + +Closes the waitlist overlay. + +```typescript +function closeWaitlist(): void +``` + +#### `closeWaitlist()` usage + +']}> + ```js {{ filename: 'main.js', mark: [17] }} + import { Clerk } from '@clerk/clerk-js' + + // Initialize Clerk with your Clerk publishable key + const clerk = new Clerk('{{pub_key}}') + await clerk.load() + + document.getElementById('app').innerHTML = ` +
+ ` + + const waitlistDiv = document.getElementById('waitlist') + + clerk.openWaitlist(waitlistDiv) + + // ... + + clerk.closeWaitlist(waitlistDiv) + ``` + + ```html {{ filename: 'index.html', mark: [24] }} + +
+ + + + + + ``` + + +## Customization + +To learn about how to customize Clerk components, see the [customization documentation](/docs/customization/overview). diff --git a/docs/manifest.json b/docs/manifest.json index 4ab96626aa..e89aabfb8e 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -219,6 +219,18 @@ ] ] }, + { + "title": "Waitlist Components", + "items": [ + [ + { + "title": "``", + "wrap": false, + "href": "/docs/components/waitlist/overview" + } + ] + ] + }, { "title": "Control Components", "items": [ diff --git a/docs/references/javascript/clerk/clerk.mdx b/docs/references/javascript/clerk/clerk.mdx index 9dceaa0102..9dcdc44305 100644 --- a/docs/references/javascript/clerk/clerk.mdx +++ b/docs/references/javascript/clerk/clerk.mdx @@ -525,6 +525,13 @@ The `Clerk` class also contains a number of methods for interacting with Clerk's - [`mountOrganizationList`](/docs/components/organization/organization-list#mount-organization-list) - [`unmountOrganizationList`](/docs/components/organization/organization-list#unmount-organization-list) +### `` + +- [`mountWaitlist`](/docs/components/waitlist/overview#mount-waitlist) +- [`unmountWaitlist`](/docs/components/waitlist/overview#unmount-waitlist) +- [`openWaitlist`](/docs/components/waitlist/overview#open-waitlist) +- [`closeWaitlist`](/docs/components/waitlist/overview#close-waitlist) + ## Additional methods In addition to the methods listed above, the `Clerk` class also has the following methods: diff --git a/public/images/ui-components/waitlist.svg b/public/images/ui-components/waitlist.svg new file mode 100644 index 0000000000..37725f31a4 --- /dev/null +++ b/public/images/ui-components/waitlist.svg @@ -0,0 +1,130 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +