embed-react 3.13.0
Install from the command line:
Learn more about npm packages
$ npm install @typeform/embed-react@3.13.0
Install via package.json:
"@typeform/embed-react": "3.13.0"
About this version
Embed library for React.
Requirements:
- node >= 14 (for node v12 use v1.21.0)
- yarn or npm
Install as NPM package using your favourite package manager:
yarn add @typeform/embed-react
or
npm install --save @typeform/embed-react
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" />
}
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>/*
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
transitiveSearchParams
>
click to open
</PopupButton>
See all available options in Vanilla JavaScript Embed Library README file. Make sure to pass props in camel case without the data-tf-
prefix.
If the global __webpack_nonce__
is set, its value will be used for a nonce
attribute on the inline <style>
block. See #458 for details.
For some custom use cases it may be convenient to open the popup programmatically (without the button being clicked).
To do this, pass a ref to PopupButton
, SliderButton
, Popover
and Sidetab
components and then use ref.current.open()
to trigger the popup to open.
Example:
const ref = useRef()
const openPopup = () => ref.current?.open()
// ...
<PopupButton
id="<form-id>"
ref={ref}
>
click to open
</PopupButton>
You can find examples for specific use-cases with React in our demos:
Fork and clone this Github repo: https://github.com/Typeform/embed
Requirements:
- node >= 14 (for node 12 use v1.21.0)
- yarn
Install dependencies:
yarn
We recommend you work in a branch:
git checkout -b cool-new-feature
Build, watch for changes (in both @typeform/embed
and @typeform/embed-react
packages) and start a demo server too (using demo-nextjs
):
yarn demo
Build and watch for changes (in @typeform/embed-react
only):
yarn dev
Run unit tests:
yarn test
See details on contributing to this repo.