I want to integrate my react app to a 3rd party app which enables me to put a script that appends the elements into the html.
But it appears that it is not that straightforward in react. The script does not append the elements so my custom component does not appear on the page.
This is what I am trying to do ( but not a gist ):
function Snippet){
return (
<Wrapper>
<h1> Snippet 1</h1>
<script src="https://gist.github.com/xxxx/e4208e452e32e353b6076944c80a1058.js"></script>
</Wrapper>
)
}
Is there a way to do this with just react?
Hi Going back to this inquiry, I found an npm package that enables the embedding of github gist in a react component.
Following the implementation of the Gist Component in the package, we can also deploy the code programmatically instead of pasting the deployment script directly to the component and it will work just fine.
export default class DeployedComponent extends React.Component{
constructor(props){
super(props);
}
componentDidMount(){
(function(props,doc,elementName,id){
let jsElement;
if(doc.getElementById(id)){
return;
}
jsElement = doc.createElement(elementName);
jsElement.id = id;
jsElement.src= "deployment_script_src";
doc.getElementsByClassName("cb-deployment-wrapper")[0].appendChild(jsElement);
})(this.props, document,"script","script_id");
}
render(){
return (
<div className="w-100 cb-deployment-wrapper ">
</div>
);
}
}
Related
I have static pages and some dynamic pages with following page components:
pages/home.js
pages/about.js
pages/search/[term].js
To link the pages I am using next/link. Going from static to static pages performs pretty well. However, when I navigate to pages/search/[term].js I can see that the entire page re-renders. This is pretty bad user experience if you are expecting the app to behave like an SPA. My assumption was the nextjs will render pages on server side and on all subsequent requests it will diff the components rendered with what needs to re-render and then re-render only updated components. If this was the case though, the Nav component would not re-render.
Is it possible to only have changing components re-render? I might be doing something wrong. I have tried making sure that I'm not unnecessarily changing props which may result in re-render but no luck so far. On Dev Tools I see 404 requests on static files which makes sense because this is a dynamic page: http://localhost:3000/_next/static/development/pages/search/hello.js net::ERR_ABORTED 404 (Not Found)
My layout looks like this:
import Head from 'next/head';
import Navbar from './Navbar';
const Layout = (props) => (
<div>
<Head>
<title>Some title</title>
</Head>
<Navbar />
{props.children}
</div>
);
export default Layout;
...and a page looks something like this:
import Layout from '../components/Layout';
const About = (props) => (
<Layout>
<main className="main">
<div className="container">
<h1>About</h1>
<Link href="/">Go home</Link>
</div>
</main>
</Layout>
);
export default About;
and [term].js:
class Search extends React.Component {
static async getInitialProps({ query, req }) {
return { query };
}
render() {
const { query } = this.props;
return (<p>{JSON.stringify(query)}</p>);
}
}
export default Search;
This was an oversight with dynamic link handling. NextJS was treating the link as static. To handle the dynamic links I should have added the as attribute to Link as per documentation:
<Link href="/search/[term]" as={`search/${term}`}>...</Link>
where the term is actual term value coming from props.
This fixed my problem.
I am building a ReactJS application and have a typeform which I embed to the middle of the page. Problem is that as soon as the Type-Form loads in the https://www.npmjs.com/package/#heyjobs/react-typeform-embed
Code:
class OverTheCounter extends Component {
render() {
return (
<div className="OtcContainer">
<div className="overTheCounterPage">
{/*<img src={image1} alt="HeaderImage" />
<h1 >Over the counter</h1>
</div>
<OtcIcon />
*/}
</div>
<ParallaxHeader />
<div className="typeForm">
<ReactTypeformEmbed
className="typeForm"
url="https://xxx.typeform.com/to/XXX"
/>
</div>
<OtcIcon />
<Footer />
</div>
);
}
}
export default OverTheCounter;
So for the react embed component you're using I can't comment or explain how it works. However I recently created and maintain a web components library (which from my tests works well with React).
You can install it with
npm install typeform-elements
And import the embed library into your apps entry point with:
import 'typeform-elements/dist/embed';
And finally use the component as so...
<typeform-standard url="{typeform_url}"></typeform-standard>
The embed component has a few attributes you can use and learn about here. And if things don't work, open an issue!
I am trying to modify the Login page of Keycloak theme with a custom theme. I need to reuse the home page design (home.js) which is designed using react and {Component}'.
Is there any possible way to import this js file or any other react component which resides in another js file to my custom theme's login.ftl file of Keycloak?
You can use Keycloakify,
Disclosure: I am the author
here is my example how did i the linking freemarker and react:
input.ftl
<#assign initialValue ="21/07/2019">
<div class="form-group">
<div id="flexInput-builder" data-initialValue=${initialValue}>
</div>
</div>
<script type="text/babel" src="/jsx/input-builder.jsx" ></script>
and input-builder.jsx
class FlexInputBuilder extends React.Component {
state = { value: '' }
componentDidMount = () => {
this.setState({value: this.props.passedValue})
}
onChangeHandler = (e) => this.setState({value: e.target.value})
render() {
const {value} = this.state;
return (
<div>
<label>
Pick the date
<input value={value}
type='date'
className="form-control bg-light"
placeholder="pick your date"
onChange={this.onChangeHandler}
id={this.state.id}
/>
</label>
</div>
)
}
}
const elementID = document.getElementById('flexInput-builder');
ReactDOM.render(
<FlexInputBuilder passedValue={elementID.dataset.initialvalue}/>,
document.getElementById('flexInput-builder')
);
For keycloak you need to customize keycloak theme you can check out there a documentation link https://www.keycloak.org/docs/latest/server_development/index.html
I am also working on the same thing making a custom theme for keycloack for react project I made the theme for that you can check out I am still working on it so no readme file for now.
My Github link repo:
another Github link: https://github.com/Alfresco/alfresco-keycloak-theme
and you cannot modify login.ftl using react components you need to make a custom theme for that in keycloak/theme folder.
it's little bit tracky part to customize keylock theme you need to understand first free maker template code style.
you can also check out this blog for a better understanding link.
I have the following embed code from infogram which is not rendering on my react app.
code looks as below:
<div class="infogram-embed" data-id="861ca70e-552c-4a4f-960a-4c7e7ff62881" data-type="interactive" data-title="Step by Step Charts"></div><script>!function(e,t,s,i){var n="InfogramEmbeds",o=e.getElementsByTagName("script")[0],d=/^http:/.test(e.location)?"http:":"https:";if(/^\/{2}/.test(i)&&(i=d+i),window[n]&&window[n].initialized)window[n].process&&window[n].process();else if(!e.getElementById(s)){var r=e.createElement("script");r.async=1,r.id=s,r.src=i,o.parentNode.insertBefore(r,o)}}(document,0,"infogram-async","https://e.infogram.com/js/dist/embed-loader-min.js");</script><div style="padding:8px 0;font-family:Arial!important;font-size:13px!important;line-height:15px!important;text-align:center;border-top:1px solid #dadada;margin:0 30px">Step by Step Charts<br>Infogram</div>
I am using a html parsing library for react which works perfectly fine in all other cases.
Any idea why this is not working?
Thanks
Not sure if this helps, here is how I made it work with React
https://jsfiddle.net/wonderwhy_er/4dt28xzL/6/
Or code
In HTML
<script>!function(e,t,s,i){var n='InfogramEmbeds',o=e.getElementsByTagName('script')[0],d=/^http:/.test(e.location)?'http:':'https:';if(/^\/{2}/.test(i)&&(i=d+i),window[n]&&window[n].initialized)window[n].process&&window[n].process();else if(!e.getElementById(s)){var r=e.createElement('script');r.async=1,r.id=s,r.src=i,o.parentNode.insertBefore(r,o)}}(document,0,"infogram-async","https://e.infogram.com/js/dist/embed-loader-min.js");</script>
<div id="app"></div>
In JS
class App extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div>
<div class="infogram-embed" data-id="861ca70e-552c-4a4f-960a-4c7e7ff62881" data-type="interactive" data-title="Step by Step Charts">
</div>
</div>
)
}
}
ReactDOM.render(<App />, document.querySelector("#app"))
I moved script part away, it just requests a loader from Infogram and you do not need to do it inside of React render, so I just moved it to header of page or something.
You also have something else at the end of the embed which I remeved and it works. Check link.
I'm curious what's the best way to use a regular JavaScript library (not written as a React component) inside a React environment.
For example, let's say there's a JavaScript library that embeds a simple widget to my webpage. The instructions are as follows:
Include the loading tag in the header.
Embed the snippet anywhere you want.
In a normal webpage, I would do the following:
<head>
<script src="http://karaoke.com/source.js"></script>
</head>
<body>
<h1>Hello look at my cool widget library</h1>
<karaoke width="600" height="400" />
</body>
How do I achieve the same effect where I have a React component like this?
class MainView extends Component {
render() {
return (
<div>
<h1>I want to show my karaoke widget here, but how?</h1>
</div>
);
}
}
The main purpose of JSX is to feel like HTML. The main purpose of render in a React component is to render that "fake" (virtual) HTML. If your external widget is also a React component, the solution is straightforward:
class MainView extends Component {
render() {
return (
<div>
<h1>Hello look at my cool widget library</h1>
<Widget width="600" height="400" />
</div>
);
}
}
All you have to make sure is that the code above runs after your widget script is loaded (so the Widget component is present). The exact solution to this would depend on your build system.
If your external library is not a React component, then you cannot use a custom widget tag and you must render actual HTML.
The big trick is to not return from render but manually render ourselves after the widget initializes what it needs:
class MainView extends Component {
render() {
// don't render anything
return <div/>;
},
componentDidMount() {
// find the DOM node for this component
const node = ReactDOM.findDOMNode(this);
// widget does stuff
$(node).activateMyCoolWidget();
// start a new React render tree with widget node
ReactDOM.render(<div>{this.props.children}</div>, node);
}
});
Take a look at portals for more details.