launchq-react

Drop-in React component for LaunchQ waitlists. Native rendering, no iframe — works with Next.js, Vite, Remix, CRA, and any React app.

Install

npm install launchq-react

Quick Start

Two lines — that's it:

import { LaunchQWaitlist } from 'launchq-react'

function App() {
  return <LaunchQWaitlist slug="my-waitlist" />
}

This fetches your waitlist config, renders the signup form with your dashboard settings (accent color, button text, headline), handles submission, and shows the success state with referral link + social share buttons.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | slug | string | required | Your waitlist slug from the LaunchQ dashboard | | baseUrl | string | 'https://launchq.co' | API base URL (for self-hosted or dev) | | referralCode | string | auto from ?ref= | Pre-filled referral code | | accentColor | string | from dashboard | Override accent color | | theme | 'dark' \| 'light' | from dashboard | Color theme | | unstyled | boolean | false | Strip all default styles | | buttonText | string | from dashboard | Override button label | | placeholder | string | 'Enter your email...' | Input placeholder | | onSuccess | (result) => void | — | Called after successful join | | onError | (error) => void | — | Called on error | | className | string | — | CSS class | | style | CSSProperties | — | Inline styles | | children | render function | — | Full UI control (see below) |

Headless Mode (useWaitlist hook)

For complete control over the UI:

import { useWaitlist } from 'launchq-react'

function CustomWaitlist() {
  const { config, email, setEmail, submit, submitting, error, result } = useWaitlist({
    slug: 'my-waitlist',
  })

  if (result) {
    return <div>You're #{result.position}! Share: {result.referralLink}</div>
  }

  return (
    <form onSubmit={(e) => { e.preventDefault(); submit(); }}>
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
      <button disabled={submitting}>{submitting ? 'Joining...' : 'Join'}</button>
      {error && <p>{error}</p>}
    </form>
  )
}

Render Props

<LaunchQWaitlist slug="my-waitlist">
  {({ email, setEmail, submit, submitting, result }) => (
    // Your custom JSX
  )}
</LaunchQWaitlist>

Provider (optional)

For multiple waitlists or custom API URL:

import { LaunchQProvider, LaunchQWaitlist } from 'launchq-react'

<LaunchQProvider baseUrl="https://my-domain.com">
  <LaunchQWaitlist slug="waitlist-1" />
  <LaunchQWaitlist slug="waitlist-2" />
</LaunchQProvider>

Optional CSS

Default styling uses inline styles (zero-config). For class-based styling:

import 'launchq-react/styles.css'

Then use the unstyled prop and apply .lq-* classes to your custom markup via the render prop.

Bundle

• Zero runtime dependencies — only react as peer dep
• ~9 KB minified (ESM + CJS)
• Tree-shakeable (sideEffects: false)