SuperAPI AI 工具集

onboardjs-react

前端与建站

查看项目

更新于 10-16 02:38

技能介绍

用途:在 React 或 Next.js 项目中集成 OnboardJS,构建用户引导(onboarding)流程。OnboardJS 是无头库,UI 由开发者控制,库负责流程逻辑、状态、持久化与导航。

主要能力:通过 OnboardingStep 定义步骤组件与跳转关系,用 OnboardingProvider 包裹应用,再用 useOnboarding 钩子获取 renderStep、next、previous、state、loading 等。支持步骤 payload、完成回调 onFlowComplete、步骤指示器与进度条、条件跳转(nextStep 为函数)、条件步骤显示(condition)、localStorage 或自定义后端持久化。

使用方式:先确认是 React 项目并检测包管理器,安装命令为 npm install @onboardjs/core @onboardjs/react(对应 pnpm/yarn/bun 替换为 pnpm add、yarn add、bun add)。随后定义步骤数组、包裹 Provider、在 UI 中调用 useOnboarding。Next.js App Router 需要给步骤组件和 Provider 包裹组件加 "use client";Pages Router 需用 dynamic 关闭 SSR。

适用场景:React/Next.js 应用的新用户引导、分步表单、带角色分支的流程。

限制:state 对象不含 steps 数组,进度需用 currentStepNumber/totalSteps 或从步骤 ID 自行计算;Next.js 必须客户端渲染;本资料未提供收费、价格等信息。