onboarding_lib

ONBOARDING_LIB

🪜 A tiny headless onboarding library with form validation, schema validation using Zod and persistance with unstorage.

A good onboarding flow is one of the best ways to guide a new user to see the value of any new product.

We built ONBOARDING_LIB to make building such onboarding flows dead simple. ONBOARDING_LIB takes care of persisting your onboarding state, handling form validation & side-effects in an intuitive way so that you can build your onboarding flow with ease.

Demo

Check out a live onboarding demo built with ONBOARDING_LIB that walks you through creating an onboarding flow here.

Features

• Headless
• Form validation using react-hook-form
• Persistance using unstorage

💻 Example Usage

/**
 * Define your onboariding data schema
 */
export const onboardingSchema = z.object({
  disappointment: z.enum(
    ["very-disappointed", "somewhat-disappointed", "not-disappointed"],
    { required_error: "Please fill in your disappointment level :)" }
  ),
  improvements: z.string({
    required_error: "Please help us improve ONBOARDING_LIB for you :)",
  }),
})

export function Demo() {
	// Create your Onboarding components
	const { Onboarding, Step } = createOnboarding({
    schema: onboardingSchema,
  })

	// Then simply define your onboarding steps
	return (
    <Onboarding
      id="onboarding-demo"
      storage={storage}
      schema={onboardingSchema}
      userId="user-id"
      onCompleted={() => {
        console.log("Completed")
      }}
    >
      <Step stepId="introduction" render={IntroductionStep} />
      <Step stepId="install-library" render={InstallLibraryStep} />
      <Step stepId="onboarding-setup" render={OnboardingSetupStep} />
      <Step stepId="creating-steps" render={CreatingStepsStep} />
      <Step stepId="on-complete" render={OnboardingStepCompletionStep} />
      <Step
        validateFormFields={["disappointment", "improvements"]}
        stepId="feedback"
        skippable={false}
        render={GiveFeedbackStep}
      />
      <Step stepId="onboarding-data" render={OnboardingDataStep} />
      <Step stepId="thank-you" render={ThankYouStep} />
    </Onboarding>
  )
}

💻 Development

• Clone this repository
• Enable Corepack using corepack enable (use npm i -g corepack for Node.js < 16.10)
• Install dependencies using pnpm install
• Run the demo website using pnpm dev

License

Made with ❤️ in Helsinki

Published under MIT License.