npm: possibly marvellous

    react-typeform-embed

    1.0.8 • Public • Published

    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.

    Install

    npm i react-typeform-embed

    DownloadsWeekly Downloads

    35,151

    Version

    1.0.8

    License

    MIT

    Unpacked Size

    22.8 kB

    Total Files

    22

    Last publish

    Collaborators

    • alexgrcs