How To Include Google Custom Search Box In An React Component

I would like to add a google custom search box in my site, which is created by using ReactJS. So the user can search content both within the site and on web. The Google generated c

Solution 1:

I think I have a solution for you without using dangerouslySetInnerHTML. Put your code in the componentDidMount block and append to the element with jQuery like so:

componentDidMount(){
const embedcode = `<script>
      (function() {
        var cx = '013626029654558379071:ze3tw4csia4';
        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);
      })();
    </script><gcse:search></gcse:search>`

  $('#gsearch').html(embedcode)
  }

And your DOM element:

<div id='gsearch'>
</div>

Still debugging some styling stuff, but this works!

Best, Patrick

Solution 2:

This perfectly works for me. Add a form element in your react and modify the snippet as shown below. react return. Add a form element tag try it. it works for me.

<form method = "get" title = "Search Form" action="https://cse.google.com/cse/publicurl">
 <div>
    <input type="text"id="q" name="q" title="Search this site" alt="Search Text" maxlength="256" />
    <input type="hidden"id="cx" name="cx" value="013626029654558379071:ze3tw4csia4" />
   <input type="image"id="searchSubmit" name="submit" src="https://www.flaticon.com/free-icon/active-search-symbol_34148" alt="Go" title="Submit Search Query" />
 </div>
</form>