react-typeform-embed-2
Version:
A React wrapper for [Typeform Embed SDK](https://developer.typeform.com/embed/).
64 lines (48 loc) • 5.59 kB
Markdown
# React Typeform Embed
A React wrapper for [Typeform Embed SDK](https://developer.typeform.com/embed/).
## Usage
```bash
npm install react-typeform-embed-2
# or
yarn add react-typeform-embed-2
```
```js
import React from "react";
import ReactTypeformEmbed from "react-typeform-embed";
class App extends React.Component {
render() {
return <ReactTypeformEmbed url={"https://demo.typeform.com/to/njdbt5"} />;
}
}
```
See the source for more examples.
## Demo
See a [live demo](https://alexgarces.github.io/react-typeform-embed/), or run:
```bash
git clone https://github.com/alexgarces/react-typeform-embed
cd react-typeform-embed
npm install # or yarn
npm start
open http://localhost:3000
```
## Props
Most props are based on the official parameters from [Typeform Embed SDK](https://developer.typeform.com/embed/)
| Prop | Description | Default |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
| `url` | The url of the Typeform form to display | `""` |
| `style` | Additional styles for the component | `{}` |
| `popup` | `true` if you want to display the form in **popup** mode.<br />By default it is displayed in **widget** mode | `false` |
| `hideHeaders` | `true` if you want to hide the **header** that displays for question groups and long questions that require scrolling. Otherwise, `false` | `false` |
| `hideFooter` | `true` if you want to hide the **footer** that displays a progress bar and navigation buttons. Otherwise, `false`. | `false` |
| `opacity` | Background opacity. Valid values include any integer between `0` (completely transparent) and `100` (completely opaque). Note that this isn't the same as the CSS opacity scale (0-1).<br />_Widget mode option_ | `100` |
| `buttonText` | Text to display in the "Start" button. Displayed only on touch-screen and mobile devices.<br />_Widget mode option_ | `"Start"` |
| `mode` | Identifies how the popup should behave. Valid values are `popup` (full-screen popup), `drawer_left` (popup slides in from the left), and `drawer_right` (popup slides in from the right).<br />_Popup mode option_ | `"popup"` |
| `autoOpen` | `true` if the typeform should open automatically when the page loads. Otherwise, `false`.<br />_Popup mode option_ | `false` |
| `autoClose` | **PRO+ accounts only**. Time until the embedded typeform should automatically close after a respondent clicks the Submit button. Your typeform will automatically close after the time you specify, so respondents won’t have to manually close your typeform popup. In milliseconds.<br />_Popup mode option_ | N/A |
| `onSubmit` | **PRO+ accounts only**. Callback event that will execute immediately after a respondent successfully submits the typeform. <br /> | N/A |
## Popup Mode Instance Methods
Use `ref` to call instance methods. See [the source](https://github.com/alexgarces/react-typeform-embed/blob/master/src/examples/ExamplePopup.js) for an example of this.
| Method | Description |
| ------------------ | ---------------------- |
| `typeform.open()` | Open the popup window |
| `typeform.close()` | Close the popup window |