Newton's Programmatic Measurements

    @evaluar/typeform-embed-react
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.2 • Public • Published

    Typeform React Embed Library

    Embed library for React.

    Installation

    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
    >
      click to open
    </PopupButton>

    See all available options in Vanilla JavaScript Embed Library README file.

    Examples

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

    Local setup and development

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

    Requirements:

    • node >= 12
    • yarn

    Install dependencies:

    yarn

    We recommend you work in a branch:

    git checkout -b cool-new-feature

    Build and watch for changes:

    yarn dev # in this package
    yarn dev # in embed package if you are working on it too

    Run unit tests:

    yarn test

    See details on contributing to this repo.

    Install

    npm i @evaluar/typeform-embed-react

    DownloadsWeekly Downloads

    2

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    593 kB

    Total Files

    24

    Last publish

    Collaborators

    • epalomeque
    • eramirez1987