I need to embed a JS widget in a React app. Is there a way to do it?
The JS widget is Google Custom Search:
(function() {
var cx = '111:xxx';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
<gcse:search></gcse:search>
use componentDidMount
componentDidMount() {
(function() {
var cx = '111:xxx';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
}
and use
<div class="gcse-searchbox" data-resultsUrl="http://www.example.com"
data-newWindow="true" data-queryParameterName="search" />`
instead of <gcse:search></gcse:search>
according to the documentation