Signup component

Render a native signup form from a Lockerverse signup definition.

import {
  LockerverseSignup,
  type LockerverseSignupProps,
  useLockerverseSignup,
} from "@lockerverse/react/signup";
import "@lockerverse/react/signup.css";

const handleSignupComplete: NonNullable<
  LockerverseSignupProps["onSignupComplete"]
> = (submission) => {
  console.info("Signup complete", submission.id);
};

export function Signup() {
  const widget = useLockerverseSignup({
    communitySlug: "your-community",
    signupSlug: "your-signup",
  });
  return (
    <LockerverseSignup
      onSignupComplete={handleSignupComplete}
      widget={widget}
    />
  );
}

Properties

type LockerverseSignupProps = {
  widget: UseLockerverseSignupResult;
  branding?: {
    accentColor?: string;
    imageUrl?: string | null;
    name: string;
  };
  googlePlacesApiKey?: string;
  onSignupComplete?: (submission: {
    id: string;
    submittedAt: string;
  }) => void;
  style?: LockerverseStyle;
  theme?: "dark" | "light";
};

Use useLockerverseSignup(options) and pass its result as widget={widget}. The hook is the only source for the client, definition, loading state, and load error. This entry does not import Stripe.

The API, environment, community slug, and signup slug stay fixed for the mounted hook. To show a different signup, remount the owning component with a new React key. Theme, branding, and callbacks can change without a remount. refresh() reloads the same signup.

Use the same LockerverseStyle tokens as payment and donate launcher. See Theming and the live theme workbench.

Host integration and verification

Use the saved communitySlug, signupSlug, apiBaseUrl, and environment from the prompt. Reuse the existing signup section and host theme. Load the live definition; do not hard-code fields, required flags, choices, or consent text. The SDK supplies loading, validation, error, and completion states. Show completion only through onSignupComplete. Do not turn this form into a payment flow, account signup, or a separate backend integration.

Pass googlePlacesApiKey only when the host has an appropriate public, restricted browser key and address suggestions are wanted. Manual address entry must remain available. Never put private API keys or submitted contact data in page source, metadata, URLs, analytics, or logs.

On an SSR host, fetch the definition through createLockerverseSignupClient from @lockerverse/sdk/signup and its load() method. Seed useLockerverseSignup(options, { initialSignup }); keep the available definition visible during refresh. Use the installed types for the complete validated snapshot. Read the shared guide for static-site constraints.

Build and check the form on desktop and 390 by 844 mobile. Check keyboard access, required-field validation, loading and error states, and manual address entry when configured. Do not send a live signup submission during this check.