React Typeform Embed 使用教程

React Typeform Embed 使用教程

项目介绍

React Typeform Embed 是一个用于在 React 项目中嵌入 Typeform 表单的开源库。Typeform 是一个强大的在线表单工具，而 React Typeform Embed 提供了简单易用的 React 组件，使得在 React 应用中嵌入 Typeform 表单变得非常方便。

项目快速启动

安装

首先，确保你的开发环境满足以下要求：

• Node.js >= 18
• Yarn 或 npm

使用你喜欢的包管理器将库添加到你的项目中：

yarn add @typeform/embed-react

或

npm install @typeform/embed-react --save

使用

在你的 React 组件中导入并使用 Typeform 嵌入组件。例如，嵌入一个 Typeform 表单作为 Widget：

import { Widget } from '@typeform/embed-react';

const MyComponent = () => {
  return (
    <Widget id="<form-id>" style={{ width: '50%' }} className="my-form" />
  );
};

export default MyComponent;

应用案例和最佳实践

嵌入表单作为弹窗

你可以使用 PopupButton 组件来嵌入一个 Typeform 表单作为弹窗：

import { PopupButton } from '@typeform/embed-react';

const MyComponent = () => {
  return (
    <PopupButton id="<form-id>" style={{ fontSize: 20 }} className="my-button">
      点击打开表单弹窗
    </PopupButton>
  );
};

export default MyComponent;

自定义弹窗打开方式

对于一些自定义用例，你可能希望在没有点击按钮的情况下打开弹窗。可以通过传递一个 embedRef 属性来实现：

import { useRef } from 'react';
import { PopupButton } from '@typeform/embed-react';

const MyComponent = () => {
  const ref = useRef();
  const openPopup = () => ref.current.open();

  return (
    <>
      <button onClick={openPopup}>点击打开弹窗</button>
      <PopupButton id="<form-id>" embedRef={ref} className="my-button">
        点击打开表单弹窗
      </PopupButton>
    </>
  );
};

export default MyComponent;

典型生态项目

React Typeform Embed 是 Typeform 官方嵌入库的一部分，与 Typeform 的其他工具和库紧密集成。以下是一些相关的生态项目：

• Typeform API: 用于创建和管理 Typeform 表单的官方 API。
• Typeform React Embed Library: 用于在 React 项目中嵌入 Typeform 表单的官方库。
• Typeform Vanilla Embed Library: 用于在非 React 项目中嵌入 Typeform 表单的官方库。

这些项目共同构成了 Typeform 的生态系统，提供了丰富的工具和资源，帮助开发者更高效地使用 Typeform 创建和管理表单。