xurei/react-jotform-embed

A rewrite for React of the embedded iframe provided by JotForm https://www.jotform.com/

react-jotform-embed

⚠ This project is no more maintained. Check (https://github.com/sbayd/jotform-react) for a more up-to-date alternative. ⚠

A rewrite for React of the embedded iframe provided by JotForm https://www.jotform.com/

This handles the resize mechanism provided by JotForm.

Install

npm install react-jotform-embed

Usage

import JotformEmbed from 'react-jotform-embed';

<JotformEmbed src="https://form.jotformeu.com/123456789" />

Props

• src : The url of your jotform, as given in their publish section.
• scrolling : A boolean to allow or disallow scrolling. Scrolling is turned off by default

Notes

To pre-populate forms in the field, add them as url params to your form. For example:

let name = "John";
<JotformEmbed src="https://form.jotformeu.com/123456789?name=John" />

Support Open-Source

Support my work on https://github.com/sponsors/xurei

react-jotform-embed's Issues

suggestion: insert a screenshot in the readme

It helps.

no react 18 support

npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^15.0.0 || ^16.0.0" from [email protected]

Lazy loading

The loading="lazy" attribute should be supported for the iframe to improve page load speed.

Updated React Jotform project

I consider this project legacy, a newer project is here https://github.com/sbayd/jotform-react.

I have forked it and updated it with React 18 support and Typescript support, as well as fixing some bugs I was having.
https://github.com/mg-aceik/jotform-react/blob/main/lib/index.tsx
sbayd/jotform-react#6

Missing module target file

Hi, There is a module field in package.json, but the target file is missing.

"module": "lib/module/react-jotform-embed.js",

https://unpkg.com/browse/[email protected]/lib/

Warning: A string ref, "iframe", has been found within a strict mode tree

Hi,

On using this the following warning appears:

Warning: A string ref, "iframe", has been found within a strict mode tree. String refs are a source of potential bugs and should be avoided. We recommend using useRef() or createRef() instead

Please advise. Thank you!

"react": "18.0.0",
"next": "12.1.5",
"react-jotform-embed": "^1.1.2",

React 17 support needed

Looking to use this, but it looks like it's dependency locked for react 15/16 only.

Used --force on install for now. Hope nothing breaks :)

npm ERR! Could not resolve dependency:
npm ERR! peer react@"^15.0.0 || ^16.0.0" from [email protected]

Can't resolve 'autobind-decorator'

Anybody help me please to fix this:

./node_modules/react-jotform-embed/lib/react-jotform-embed.js
Module not found: Can't resolve 'autobind-decorator' in 'D:\wamp\www\wordpress\ronnie\sprinterrentalsusa_react\node_modules\react-jotform-embed\lib'

Warning about moving code from componentWillMount to componentDidMount

Seem to be getting this message when using react-jotform-embed v1.1.3 with react v18.2.0

• Move code from componentWillMount to componentDidMount (preferred in most cases) or the constructor.

Please update the following components: JotformEmbed
at JotformEmbed (\react-jotform-embed\lib\cjs\react-jotform-embed.js:84:5)
at div
at \react-bootstrap\cjs\Col.js:72:8
at div
at \react-bootstrap\cjs\Row.js:22:3
at div
at \react-bootstrap\cjs\Container.js:24:3
at section
at Contact
at main
at div
at SSRProvider (@react-aria\ssr\dist\main.js:33:13)
at Layout (webpack-internal:///./src/components/Layout.js:31:32)
at App (webpack-internal:///./src/pages/_app.js:33:16)
at StyleRegistry (\styled-jsx\dist\stylesheet-registry.js:231:34)
at AppContainer (\next\dist\server\render.js:390:29)
at AppContainerWithIsomorphicFiberStructure (\next\dist\server\render.js:420:57)
at div
at Body (\next\dist\server\render.js:688:21)

More info about componentWillMount at https://sentry.io/answers/componentWillMount-has-been-renamed/