React Typeform Embed 使用教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00492/article/details/141743689

React Typeform Embed 使用教程

react-typeform-embedReact wrapper for Typeform Embed SDK项目地址:https://gitcode.com/gh_mirrors/re/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;