I'm trying to embed a script tag to render a form in a component. I can't figure out how to do this in React. If I took this tag and pasted it to an HTML document, the form would load perfectly, but I don't know how to do the equivalent with React.
I cant paste the actual code to embed on this site for work reasons, but I'm basically trying to embed this into a component so that a form renders and users can submit the form:
<script type="text/javascript" src="https://form.jotform.com/jsform/1234566789"></script>
Any ideas?
you can use the tag
const styles = {} // if you want to add some custom CSS
const URL = "https://form.jotform.com/jsform/1234566789" //embed URL
<iframe title="your title" style={styles} src={URL}></iframe>
read more about it HERE
I found a lovely node package that lets you embed Jotforms; you can find the NPM article here :
https://www.npmjs.com/package/react-jotform-embed
I made a component to easily embed JotForm.com forms to your ReactJS based websites or applications. It supports NextJS / Gatsby like SSR frameworks.
You also have access to some callbacks like onSubmit if you need.
You can access it here: https://npmjs.com/package/jotform-react
Related
I am working in SaaS website and they don't provide a better customization for the website,
so I ended up using the custom HTML & CSS & JS codes to customize the website.
The website is a single page application (SPA) built by Vue, and it uses custom routing
I wanted to change the link of (a tag) by vanilla javascript, it worked, but when I try to click on the link, it redirects me to the original route instead of the link I provided
For example:
This is the original that vue set
OLD
and this is the new that I set using vanilla javascript:
NEW
it shows the new one in the browser, but when I click on it, it redirects me to the old
how can I overcome this issue?
programmers!
I am using ckeditor5 with strapi. But I could not figure out how to embed codepens. When I put recommended embed code by codepen itself, it just shows : See pen <a href="..."/>. If i inject the code with iframe it is just disappearing.
Anyone has ever done it ?
CKEditor plugin for Strapi allows to embed HTML snippets. See screenshot.
If the iframe code is visible in your Strapi dashboard, but it doesn't appear on your website (e.g. React app), it might be because of HTML Sanitization.
If your app uses something like DOMPurify, check How to allow an iframe tag in dompurify including all of its attributes.
If you don't need to stick to CKEditor, I recommend using Editor.js which has a plugin that offers a sanitized way to embed various services, such as CodePen. It's bundled by default with the Editor.js plugin for Strapi.
I am learning Reactjs, and there is a problem when I try to use {Link} to go to external websites.
<Link to={repo.html_url}>
{repo.name}
</Link>
Let's say the repo.html_url is
https://github.com/ningmeng7998/SmartER-Project-Android-Frontend.
Instead of taking me to this URL, it takes me to http://localhost:3000/profile/https://github.com/ningmeng7998/SmartER-Project-Android-Frontend, which adds localhost in front of it.
How to solve this problem?
I'm assuming you're using React Router's Link component, as it is not part of vanilla React.
Currently, React Router Links do not support external URLs, they're just for navigating internally in your app. You'll want to use a standard HTML anchor tag. Try this:
<a href={repo.html_url}>{repo.name}</a>
There's some discussion going on around the issue of Links supporting external URLs going on here if you'd like to learn more or stay in the loop.
Another solution is to implement your own wrapper around Link that handles the logic (and in the end spits out a <Link> component for internal routes or <a> tag for external URLs).
For external links, just use a tag! as <Link> is only used for internal routes. As you can see in the docs that React Router themselves used a tags for an external link instead of Link.
<a href={repo.html_url}>
{repo.name}
</a>
I am trying to dynamically output some video content using an api (jwplayer). The api returns me some data to put in a script tag for instance:
.js">
This tag works perfectly with plain html, but doesn't work with react jsx. How can I use this with a react component?
Try this package react-jwplayer on npm just add your videoId to that component.
import JWPlayer from 'react-jwplayer';
<JWPlayer videoId="<your-id-here>" />
Is it possible to embed an external HTML page inside of AngularJS? For instance if i have a page at "localhost:8080/mypage/5533n", is there an easy way to embed inside my angular app?
I have a graph/table that I want to display, but i keep hitting Lexer errors, and sometimes CORS problems which I already fixed. I'm using the below code:
<div class="slide-animate" ng-include="http://localhost:8080/#/notebook/2APHT5YD2/paragraph/20150609-170553_989764970?asIframe"></div>
Seems like you are missing ' here for your ng-include URL.
ng-include="'http://localhost:8080/#/notebook/2APHT5YD2/paragraph/20150609-170553_989764970?asIframe'"