🚫 Unmaintained Repository

Please Note: This repository is no longer maintained.

For the latest and actively maintained version, please visit the official repository:

Typeform React Embed Library

Thank you for your support and understanding.

React Typeform Embed

A React wrapper for Typeform Embed SDK.

See a live demo.

Upgrading from v.0.3

Important: Please be aware that if you are updating this package from a version previous to v.1.0 you will need to apply changes in your implementation.

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

Widget

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

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 { Popup /* or Slider */ } from 'react-typeform-embed';

const App = () => {
  return (
    <Popup id="njdbt5" size={80}>
      <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 { Sidetab /* or Popover */ } from 'react-typeform-embed';

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

See the source for more examples.

Configuration

You need to provide the form id as id prop.

You can get the id from the public URL of your form URL (https://form.typeform.com/to/<form-id>) or admin panel URL (https://admin.typeform.com/form/<form-id>).

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

<Widget
  id="your-form-id"
  height={400}
  opacity={80}
  hidden={{
    userId: 'hidden-user-id'
  }}
  onSubmit={() => {
    console.log('Form submitted!')
  }}
  hideHeaders
  disableAutoFocus
  enableSandbox
/>

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

Official Typeform React Embed Library

License

Code released under the MIT license.

License

alexgarces/react-typeform-embed

ErrorLooks like something went wrong!

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 2

Packages 0

Uh oh!

Contributors 5

Uh oh!

Languages

Error
Looks like something went wrong!

Packages