Google Custom Search Engine -- using ReactJS

Question

I want to use google custom search engine in my React application. But I have a problem to apply it.

I checked in google website that the code is

<script>
  (function() {
    var cx = '008391824253360889328:j5posmpyok0';
    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>

But I have no idea how to change it into jsx that can use in React.

Can anyone help? Thanks.

Madhu Sudhan · Accepted Answer · 2018-08-01 18:12:28Z

1

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>

answered Aug 1, 2018 at 18:12

Madhu Sudhan

194 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bennygenel · Accepted Answer · 2017-09-08 06:59:23Z

0

You don't have to change anything. You can run it directly.

For Example:

conponentDidMount() {
  (function() {
    var cx = '008391824253360889328:j5posmpyok0';
    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);
  })();
}

But actually if you check the code that you got from google; its just adding a script tag. You can just add it manually too.

<script async="true" src="https://cse.google.com/cse.js?cx=008391824253360889328:j5posmpyok0" type="text/javascript"></script>

answered Sep 8, 2017 at 6:59

bennygenel

24.8k7 gold badges68 silver badges80 bronze badges

2 Comments

Victor Diao Over a year ago

Thanks. Additionally, how to add such <gcse:searchbox></gcse:searchbox> into render() function in JSX. Because "<gcse:searchbox></gcse:searchbox>" are xml and cannot be used in jsx.

bennygenel Over a year ago

@VictorDiao You have 2 options I think. One is described here saying that you can use dangerouslySetInnerHTML but its dangerous. Second one is here you can use Html5 div tags for search.

Collectives™ on Stack Overflow

Google Custom Search Engine -- using ReactJS

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related