alexgarces / react-typeform-embed Goto Github PK
View Code? Open in Web Editor NEWReact wrapper for Typeform Embed SDK
Home Page: https://alexgarces.github.io/react-typeform-embed/
License: MIT License
React wrapper for Typeform Embed SDK
Home Page: https://alexgarces.github.io/react-typeform-embed/
License: MIT License
Hello,
I'm fairly new to react and looking into embedding a form as a pop-up. I'm using functional components and can't really figure out how to adapt the classic example for functional stateless components (espacially the ref
part). Any chance you can provide us with a working example ?
Cheers
I have the PRO + account and I'm trying to print the result of the onSubmit callback but its undefined.
This is my code right now:
class TypeForm extends React.Component {
onSubmit(args) {
console.log('onSubmit', args);
}
render() {
return (
<div className="type-form''>
<ReactTypeformEmbed
onSubmit={this.onSubmit}
popup={false}
url={this.props.url}/>
</div>
);
}
};
Thanks in advance.
Does this package works in React Native?
on while filling up the Form.
Once I navigate back or to any page powered by react router I can't scroll or touch anymore on my website, it's like I'm locked.
It's exactly on the form if I was the user and decided to cancel the form and go away from that page.
Does anyone has experienced this?
Hey after installing this npm told me that it had many vulnerabilities, I'm going to try to fix them but just so you people know.
Workaround:
render component only after mounting
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 seconds .Popup mode option |
N/A |
---|
Howdy!
On page load we're taken all the way to the bottom of the page and the user has to scroll all the way up. (So I position my ReactTypeformEmbed at the very bottom of the page, and then the user is scrolled to that component not after the component is loaded (tried fixing with a setScroll on the componentWillMount function), but after the (embedded) typeform pagee loads.
Here's a snippit for context:
<div className={classNames(classes.main, classes.mainRaised)}>
<div className={classes.container}>
<ScrollableAnchor id={"about-us"}>
<SectionAboutUs />
</ScrollableAnchor>
<SectionTeam style={{ marginTop: "-150px" }} />
<ScrollableAnchor id={"faq"}>
<SectionFAQ />
</ScrollableAnchor>
<ScrollableAnchor id={"schedule"}>
<SectionSchedule />
</ScrollableAnchor>
<SectionSponsors />
<ScrollableAnchor>
<SectionWork /> {/* <ReactTypeformEmbed LIVES HERE!!! /> */}
</ScrollableAnchor>
</div>
</div>
Full source for that page found here: https://github.com/MarioLopezBaylor/wacode-site/blob/master/src/views/LandingPage/LandingPage.jsx
And here's the render function from the component:
render() {
const { classes } = this.props;
return (
<div className={classes.section}>
<GridContainer
justify="center"
style={{ height: "475px", width: "100%" }}
>
<GridItem cs={12} sm={8} md={8}>
<h2 className={classes.title}>Work with us</h2>
<h4 className={classes.description}>
Wacode is looking for sponsors and community partners. We want to
find business and organizations who believe and support our
mission of bringing technology to our local community, and
providing a platform for our flourishing tech community.
</h4>
<ReactTypeformEmbed
popup={false}
url="https://wacodeteam.typeform.com/to/mpK8Ns"
/>
</GridItem>
</GridContainer>
</div>
);
}
Full source for this other component found here: https://github.com/MarioLopezBaylor/wacode-site/blob/master/src/views/LandingPage/Sections/SectionWork.jsx
If you need more context, here's the full repo: https://github.com/MarioLopezBaylor/wacode-site
Maybe I'm being dumb about this? Let me know.
Thanks for looking into it!
Hi! Thanks for contributing the code. Embedded Mode is awesome on PC but it does not work on a mobile device such as iPad.
Do you happen to know how to deal with it?
I have embedded a typeform inside a webpage. It works great, but one thing I've noticed is that it caches the form submission results, so that the next time the person submits the form, the values are pre-populated. I don't want the values to be pre-populated.
Is there a built in way to remove the cache, or do I have to remove it from local storage manually?
When using Gatsby (v 1.1.45), I can gatsby develop
just fine and see embedded Typeforms.
However, when using gatsby build
I get a webpack error: window is not defined
I am embedding 2 typeform in a single component. onSubmit
function on both the component get called simultaneously even if I have submitted only first typeform.
import React from "react";
import { ReactTypeformEmbed } from "../components";
const ExampleWidget = () => {
return (
<div>
<div>
<ReactTypeformEmbed
onSubmit={() => {
console.log("typeform 1 submitted");
}}
url={"https://typeformdeviomedia.typeform.com/to/Cvc6N8"}
/>
</div>
<div>
<ReactTypeformEmbed
onSubmit={() => {
console.log("typeform 2 submitted");
}}
url={"https://admin.typeform.com/to/cVa5IG"}
/>
</div>
</div>
);
};
export default ExampleWidget;
Hello,
Thank you for providing this library! I would like to use this in a project but there is currently no explicit license granted to this work. Would you please consider releasing this under a license such as MIT?
Please see the following references for more details:
Thank you very much for the consideration.
Any idea how to respond to this bug?
Error in ./~/react-typeform-embed/lib/ReactTypeformEmbed/ReactTypeformEmbed.css Module build failed: Error: No PostCSS Config found in: /Users/xxxxxxx/auth0react/node_modules/react-typeform-embed/lib/ReactTypeformEmbed at <anonymous> @ ./~/react-typeform-embed/lib/ReactTypeformEmbed/ReactTypeformEmbed.css 4:14-153 18:2-22:4 19:20-159
Should I just add them to the url
prop of the component?
The Embed Modes offered in the app are Standard, Full-page, Popup, Slider, Popover, and Side Tab. This library appears to only support Popup (popup=true
) and, I assume, Full-page (if popup=false
). It appears the only way to use the others is to use the copy-and-paste code snippet in the admin.
I'm not 100% on what the issue here is, or why, but just tried this library out and when I set popup={true}
, any buttons in the same render block no longer seem able to run their onClick
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-typeform-embed": "^0.1.5",
render() {
return (
<div className="ExamplePopup">
<ReactTypeformEmbed
popup={true}
url={'https://demo.typeform.com/to/njdbt5'} />
<button onClick={()=> alert(1)}>Foo</button>
</div>
)
}
When I comment out the popup={true}
I can click the button and get an alert, when I add it back in, nothing fires. Debugging with the react dev tools, I can see that the onClick event is still bound to it, and when I "store as global" and call it from the console, it fires correctly. So.. not sure what's going on here.
Edit: Trying to replicate this in a clone of this repo, changing/adding libraries/etc, and so far can't break it.. Non-deterministic issues!
Edit2: Ok, seem to be able to replicate this as follows:
create-react-app break
cd break
npm i react-typeform-embed
Create a new file ExamplePopup.js
with code copied from this repo:
import React from 'react';
import { ReactTypeformEmbed } from 'react-typeform-embed';
class ExamplePopup extends React.Component {
constructor(props) {
super(props);
this.openForm = this.openForm.bind(this);
}
openForm() {
this.typeformEmbed.typeform.open();
}
render() {
return (
<div className="ExamplePopup">
<ReactTypeformEmbed
popup={true}
autoOpen={false}
url={'https://demo.typeform.com/to/njdbt5'}
hideHeaders={true}
hideFooter={true}
buttonText="Go!"
style={{top: 100}}
ref={(tf => this.typeformEmbed = tf) }/>
<button className="btn" onClick={this.openForm} style={{cursor: 'pointer'}}>Click to open the popup!</button>
</div>
);
}
}
export default ExamplePopup;
Edit App.js
to include the following additional lines:
import ExamplePopup from './ExamplePopup';
And in the render()
<ExamplePopup/>
Then npm start
.
The button shows, but when you attempt to click on it, nothing happens.
When I import it the way it is shown in the README file. It gives the below error:
Could not find a declaration file for module 'react-typeform-embed'. 'path_in_node_mdulesreact-typeform-embed/lib/index.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/react-typeform-embed` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-typeform-embed';`
It gives a 404
when I try to install with types.
The Typeform displays completely fine and pops up well, but when you go to type in the answer, it brings the keyboard up and then immediately shoves it back down. It does this every time you try to type so users are not able to finish the form.
Any others have this issue or any suggestions? I'll keep trying it on different Android devices.
Hi - Tried to install this in a Gatsby project and coming up w/ some errors around Babel. Trying to figure it out, any suggestions?
Thanks
https://gist.github.com/noomerikal/2f7f9d13c5449849d0eb7f447175ee65
I've just tried this component on a simple page with a div and the Typeform as the single child. I cannot make it work without this annoying refresh: http://sendvid.com/chc8cy5p
I have tried removing the classes from the div
. Is this related to some internal <input>
tag?
<div className={'container-fluid-content pay'}>
<ReactTypeformEmbed url={'LINK'}/>
</div>
In your example popup you show:
ref={(tf => this.typeformEmbed = tf) }/>
My ESLint gives an error:
[eslint] Arrow function should not return assignment. (no-return-assign)
Hello,
I just saw that onSubmit
callback is missing
It would be great to support it
https://developer.typeform.com/embed/onsubmit-callback/
🍺
Hi there,
Trying to add this to my gatsby project but running into an issue where the form loads a full page: https://5d1399e7729b99000785c917--jpvalery-portfolio.netlify.com/contact/
I tried adding a style="position:relative" but it didn't work
For reference, here's the contact.js page:
import React from 'react'
import { graphql } from 'gatsby'
import Helmet from 'react-helmet'
import config from '../utils/siteConfig'
import Layout from '../components/Layout'
import WrapperGrid from '../components/WrapperGrid'
import Hero from '../components/Hero'
import ContactBody from '../components/Contact/ContactBody'
import ContactBodyTop from '../components/Contact/ContactBodyTop'
import ContactBodyBottom from '../components/Contact/ContactBodyBottom'
import { ReactTypeformEmbed } from 'react-typeform-embed';
import SEO from '../components/SEO'
const Contact = ({ data, location }) => {
const info = data.contentfulAbout
return (
<Layout location={location}>
<Helmet>
<title>{`${config.siteTitle} - Contact`}</title>
</Helmet>
<SEO postNode={info} pagePath="contact" customTitle pageSEO />
<WrapperGrid>
<Hero image={info.heroImage} />
<ContactBody>
<ContactBodyTop body={info.body} />
<ContactBodyBottom>
<ReactTypeformEmbed url="https://jpvalery.typeform.com/to/y96C4A" hideHeaders="true" hideFooter="true" opacity="0" style="position:relative;" />
</ContactBodyBottom>
</ContactBody>
</WrapperGrid>
</Layout>
)
}
export const query = graphql`
query {
contentfulAbout {
title
id
heroImage {
title
fluid(maxWidth: 1000) {
...GatsbyContentfulFluid_withWebp
}
ogimg: resize(width: 900) {
src
width
height
}
}
body {
childMarkdownRemark {
html
}
}
}
}
`
export default Contact
Any idea what I'm doing wrong?
How could I fix this so that the form stays in <ContactBodyBottom>
?
Thanks a lot for your help!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.