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:
JavaScript
x
9
1
(function() {
2
var cx = '111:xxx';
3
var gcse = document.createElement('script');
4
gcse.type = 'text/javascript';
5
gcse.async = true;
6
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
7
var s = document.getElementsByTagName('script')[0];
8
s.parentNode.insertBefore(gcse, s);
9
})();
JavaScript
1
1
1
<gcse:search></gcse:search>
Advertisement
Answer
use componentDidMount
JavaScript
1
12
12
1
componentDidMount() {
2
(function() {
3
var cx = '111:xxx';
4
var gcse = document.createElement('script');
5
gcse.type = 'text/javascript';
6
gcse.async = true;
7
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
8
var s = document.getElementsByTagName('script')[0];
9
s.parentNode.insertBefore(gcse, s);
10
})();
11
}
12
and use
JavaScript
1
3
1
<div class="gcse-searchbox" data-resultsUrl="http://www.example.com"
2
data-newWindow="true" data-queryParameterName="search" />`
3
instead of <gcse:search></gcse:search>
according to the documentation