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>
);
}
}