A React wrapper for Typeform Embed SDK

by React

React Typeform Embed

A React wrapper for Typeform Embed SDK.

View Demo View Github

Usage

First install the package

yarn add react-typeform-embed

There are five different embed types that you can import as components.

  • Widget
  • Popup
  • Slider
  • Sidetab
  • Popover

You need to provide the form id as id prop.

You can get the id from the public URL of your form:

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

Or from the admin panel URL:

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

You can also use any other option (except container) and callback from the official SDK passing them as props. Find more info here:

Widget

With the widget embed type you can embed your form inline, in a DOM element.

import React from 'react';
import { Widget } from 'react-typeform-embed';

const App = () => {
  render() {
    return <Widget id="njdbt5" height={500} />;
  }
}

Popup and Slider

With the popup and slider embed types you can embed the form in a modal. You need to pass as children the element/s that will open the modal when clicked.

import React from 'react';
import { Popup /* or Slider */ } from 'react-typeform-embed';

const App = () => {
  return (
    <Popup id="njdbt5" size={400}>
      <button>Open Popup</button>
    </Popup>
  );
}

Sidetab and Popover

These other modal embed types work exactly as the Popup component but, since they are already visible and clickable, passing children element/s is optional.

import React from 'react';
import { Sidetab /* or Popover */ } from 'react-typeform-embed';

const App = () => {
  return <Sidetab id="njdbt5">
}

See the source for more examples.

Demo

See a live demo, or run:

git clone https://github.com/alexgarces/react-typeform-embed
cd react-typeform-embed
yarn
yarn start
open http://localhost:3000

Alternatives