Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-typeform-embed

Package Overview
Dependencies
Maintainers
1
Versions
17
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-typeform-embed

A React wrapper for [Typeform Embed SDK](https://developer.typeform.com/embed/).

  • 1.0.7
  • npm
  • Socket score

Version published
Weekly downloads
6.6K
decreased by-7.14%
Maintainers
1
Weekly downloads
 
Created
Source

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

License

Code released under the MIT license.

Keywords

FAQs

Package last updated on 15 Sep 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc