@typeform/embed-react

What is @typeform/embed-react?

@typeform/embed-react is an npm package that allows you to easily embed Typeform forms into your React applications. It provides a set of React components that make it simple to integrate Typeform's interactive forms, surveys, and quizzes into your web projects.

What are @typeform/embed-react's main functionalities?

Popup Embed

This feature allows you to embed a Typeform as a popup that can be triggered by a button click. The PopupButton component takes the Typeform ID and other optional styling properties.

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

function App() {
  return (
    <div>
      <PopupButton id="YOUR_TYPEFORM_ID" style={{ fontSize: 20 }}>
        Click to open form
      </PopupButton>
    </div>
  );
}

Slider Embed

This feature allows you to embed a Typeform as a slider that slides in from the side of the screen. The Slider component takes the Typeform ID and optional styling properties.

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

function App() {
  return (
    <div>
      <Slider id="YOUR_TYPEFORM_ID" style={{ width: '100%', height: '500px' }} />
    </div>
  );
}

Widget Embed

This feature allows you to embed a Typeform directly into your page as a widget. The Widget component takes the Typeform ID and optional styling properties.

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

function App() {
  return (
    <div>
      <Widget id="YOUR_TYPEFORM_ID" style={{ width: '100%', height: '500px' }} />
    </div>
  );
}

Other packages similar to @typeform/embed-react

react-google-forms

react-google-forms is a package that allows you to embed Google Forms into your React applications. It provides a simple way to integrate Google Forms, but it lacks the variety of embed options (popup, slider, widget) that @typeform/embed-react offers.

react-formio

react-formio is a package for embedding Form.io forms into React applications. It provides robust form-building capabilities and supports complex form logic. While it offers more advanced features, it is more complex to set up compared to the simplicity of @typeform/embed-react.

README

⚛ Typeform React Embed Library

Embed library for React.

Installation

Requirements:

• node >= 14 (for node v12 use v1.21.0)
• yarn or npm

Install as NPM package using your favourite package manager:

yarn add @typeform/embed-react

or

npm install --save @typeform/embed-react

Usage

Import the component you want to use. Then render it in your React app:

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

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

Popup and slider components provide a button to open the embed:

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

const MyComponent = () => {
  return (
    <PopupButton id="<form-id>" style={{ fontSize: 20 }} className="my-button">
      click to open form in popup
    </PopupButton>
  )
}

You can render popover and slider anywhere in your app (preferably at the end of the page):

import { Sidetab } from '@typeform/embed-react'

const MyComponent = () => {
  return <Sidetab id="<form-id>" buttonText="click to open" />
}

How to get form id of your form?

You can find <form-id> from the public URL of your form:

• https://form.typeform.com/to/<form-id>

Or from admin panel URL:

• https://admin.typeform.com/form/<form-id>/*

Configuration

Options

Pass options as props to the component.

<PopupButton
  id="<form-id>"
  size={60}
  hidden={{
    foo: 'Foo Value',
    bar: 'Bar Value',
  }}
  onReady={() => {
    console.log('form ready')
  }}
  enableSandbox
  transitiveSearchParams
>
  click to open
</PopupButton>

See all available options in Vanilla JavaScript Embed Library README file. Make sure to pass props in camel case without the data-tf- prefix.

CSP nonce support

If the global __webpack_nonce__ is set, its value will be used for a nonce attribute on the inline <style> block. See #458 for details.

Passing a custom ref

For some custom use cases it may be convenient to open the popup programmatically (without the button being clicked).

To do this, pass a ref to PopupButton, SliderButton, Popover and Sidetab components and then use ref.current.open() to trigger the popup to open.

Example:

const ref = useRef()
const openPopup = () => ref.current?.open()
// ...
<PopupButton
  id="<form-id>"
  ref={ref}
>
  click to open
</PopupButton>

Examples

You can find examples for specific use-cases with React in our demos:

• Next.js (React) demo
• Codesandbox demo

Local setup and development

Fork and clone this Github repo: https://github.com/Typeform/embed

Requirements:

• node >= 14 (for node 12 use v1.21.0)
• yarn

Install dependencies:

yarn

We recommend you work in a branch:

git checkout -b cool-new-feature

Build, watch for changes (in both @typeform/embed and @typeform/embed-react packages) and start a demo server too (using demo-nextjs):

yarn demo

Build and watch for changes (in @typeform/embed-react only):

yarn dev

Run unit tests:

yarn test

See details on contributing to this repo.