@ formsort/ react-embed (英语)
嵌入 格式化 反应组件内的流量.
这个包裹很方便 @ formsort/web-embed- api。 。 。 .
重要说明: 此软件包用于React Web应用程序. 如果您想在 React 本地应用程序中嵌入格式流,请参见 反应本地嵌入式引导。 。 。 .
安装
添加 @formsort/react-embed 执行 pnpm add @formsort/react-embed, (中文(简体) ), yarn add @formsort/react-embed,或 npm install @formsort/react-embed。 。 。 .
使用量
以下是基本用法的例子:
import React from 'react';
import EmbedFlow from '@formsort/react-embed';
const EmbedFlowExample: React.FunctionComponent = () => (
<div>
<EmbedFlow
clientLabel="formsort"
flowLabel="onboarding"
variantLabel="main"
embedConfig={{
style: {
width: '100%',
height: '100%',
},
}}
/>
</div>
);
使用单独的 SecureEmbedFlow 用于通过 POST 中响应器数据的组件
机构 :
import { SecureEmbedFlow } from '@formsort/react-embed';
<SecureEmbedFlow
clientLabel="formsort"
flowLabel="onboarding"
// responderUuid={optionalResponderUuid}
initialAnswers={{
firstName: 'Olivia',
}}
formsortEnv="staging"
// variantRevisionUuid={optionalVariantRevisionUuid}
/>;
responderUuid, (中文(简体) ), initialAnswers, (中文(简体) ), formsortEnv,以及 variantRevisionUuid 为:
选项. SecureEmbedFlow 不接受 queryParams它发送
responderUuid 财务报告和审定财务报表 initialAnswers 在POST体内。 它又说 formsortEnv 财务报告和审定财务报表
variantRevisionUuid 到导航 URL.
它的配置和事件道具与 EmbedFlow。 。 。 .
活动
您可以添加事件倾听器到流程中 Flowloaded, (中文(简体) ), redirect 见 所有事件听众
道具
| 专利名称 | 说明 | 需求 | 示例数值 |
|---|---|---|---|
| 客户端标签 | 客户端名称 | 对 | formsort |
| 流量标签 | 流程名称 | 对 | onboarding |
| 变位标签 | 变体名称 | 没有 | main |
| 响应者Uuid | 正在装入当前答案的响应器 uuid | 没有 | e4923baa-dc2d-4555-813c-a166952292fa |
| 窗体交换 Env | 组合环境标签,如果不使用生产 | 没有 | staging |
| 变体 | 变种修订 UUID 以装入特定版本而不是最近版本 | 没有 | 0a3c4f52-1b8e-4d1a-9b6f-3a2e5c7d9f10 |
| 查询 | 额外的查询参数,用于在表格中预先填入答案 | 没有 | [['name', 'Olivia'], ['age', '3']] |
| 嵌入式配置 | 配置传递到下面 FormsortWebEmbed | 没有 | { style: { height: '100%' } } |
| 已下载 | 事件听众 | 没有 | () => { console.log('flow loaded') } |
| 已关闭 | 事件听众 | 没有 | () => { console.log('flow closed') } |
| 最终化 | 事件听众 | 没有 | () => { console.log('flow finalized') } |
| 已下载 | 事件听众 | 没有 | () => { console.log('step loaded') } |
| 已安装 | 事件听众 | 没有 | () => { console.log('step loaded') } |
| 重定向 | 事件听众 | 没有 | (url: string) => { console.log('redirecting to:', url) } |
| 未经授权 | 事件听众 | 没有 | () => { console.log('ID token is missing or invalid.') } |
安全 EmbedFlow 道具
SecureEmbedFlow 支持 clientLabel, (中文(简体) ), flowLabel, (中文(简体) ), variantLabel, (中文(简体) ),
embedConfig,所有事件道具来自 EmbedFlow. 它还支持这些
安全嵌入道具 :
| 专利名称 | 说明 | 需求 | 示例数值 |
|---|---|---|---|
| 响应者Uuid | pOST 内发送的响应器 UUID | 没有 | e4923baa-dc2d-4555-813c-a166952292fa |
| 初始答复 | pOST 中发送的初始答案 | 没有 | { firstName: 'Olivia' } |
| 窗体交换 Env | 一体化环境 | 没有 | staging |
| 变体 | 变种修订 UUID 以装入 | 没有 | 0a3c4f52-1b8e-4d1a-9b6f-3a2e5c7d9f10 |
装入特定变体修订版
使用 variantRevisionUuid 道克来加载特定的变种修订. 如果想要显示最新的变体,请不要使用. 两者 EmbedFlow 财务报告和审定财务报表 SecureEmbedFlow 支持这个计划.
import React from 'react';
import EmbedFlow from '@formsort/react-embed';
const EmbedFlowExample: React.FunctionComponent = () => (
<div>
<EmbedFlow
clientLabel="formsort"
flowLabel="onboarding"
variantLabel="main"
variantRevisionUuid="<uuidv4>"
/>
</div>
);