Wrap Algolia search into a React component

src/components/DocSearch/DocSearch.js

@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * @emails react-core
+ */
+
+import React, {Component} from 'react';
+import {colors, media} from 'theme';
+
+class DocSearch extends Component {
+    state = {
+        disabled: false
+    }
+    componentDidMount() {
+        // Initialize Algolia search.
+        // TODO Is this expensive? Should it be deferred until a user is about to search?
+        // eslint-disable-next-line no-undef
+        if(window.docsearch) {
+            docsearch({
+                apiKey: '36221914cce388c46d0420343e0bb32e',
+                indexName: 'react',
+                inputSelector: '#algolia-doc-search',
+            });
+        } else {
+            this.setState({ disabled: true})
+        }
+    }
+
+    render() {
+        const {disabled} = this.state
+
+        return (
+            <form
+                css={{
+                    display: 'flex',
+                    flex: '0 0 auto',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    paddingLeft: '0.5rem',
+                    paddingRight: '0.5rem',
+
+                    [media.lessThan('small')]: {
+                        justifyContent: 'flex-end',
+                    },
+                    [media.lessThan('large')]: {
+                        marginRight: 10,
+                    },
+                    [media.between('small', 'medium')]: {
+                        width: 'calc(100% / 3)',
+                    },
+                    [media.between('medium', 'xlarge')]: {
+                        width: 'calc(100% / 6)',
+                    },
+                    [media.greaterThan('small')]: {
+                        minWidth: 120,
+                    },
+                    }}>
+                <input
+                    disabled={disabled}
+                    css={{
+                        appearance: 'none',
+                        background: 'transparent',
+                        border: 0,
+                        color: colors.white,
+                        fontSize: 18,
+                        fontWeight: 300,
+                        fontFamily: 'inherit',
+                        position: 'relative',
+                        padding: '5px 5px 5px 29px',
+                        backgroundImage: 'url(/search.svg)',
+                        backgroundSize: '16px 16px',
+                        backgroundRepeat: 'no-repeat',
+                        backgroundPositionY: 'center',
+                        backgroundPositionX: '5px',
+
+                        ':focus': {
+                        outline: 0,
+                        backgroundColor: colors.lighter,
+                        borderRadius: '0.25rem',
+                        },
+
+                        [media.lessThan('large')]: {
+                        fontSize: 16,
+                        },
+                        [media.greaterThan('small')]: {
+                        width: '100%',
+                        },
+                        [media.lessThan('small')]: {
+                        width: '16px',
+                        transition: 'width 0.2s ease, padding 0.2s ease',
+                        paddingLeft: '16px',
+
+                        ':focus': {
+                            paddingLeft: '29px',
+                            width: '8rem',
+                            outline: 'none',
+                        },
+                        },
+                    }}
+                    id="algolia-doc-search"
+                    type="search"
+                    placeholder="Search docs"
+                    aria-label="Search docs"
+                />
+            </form>
+        );
+    }
+}
+
+export default DocSearch;

src/components/DocSearch/index.js

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+import DocSearch from './DocSearch';
+
+export default DocSearch;

src/components/LayoutHeader/Header.js

@@ -13,6 +13,7 @@ import React from 'react';
 import {colors, fonts, media} from 'theme';
 import {version} from 'site-constants';
 import ExternalLinkSvg from 'templates/components/ExternalLinkSvg';
+import DocSearch from 'components/DocSearch';
 
 import logoSvg from 'icons/logo.svg';
 
@@ -135,78 +136,7 @@ const Header = ({location}) => (
           />
         </nav>
 
-        <form
+        <DocSearch />
-          css={{
-            display: 'flex',
-            flex: '0 0 auto',
-            flexDirection: 'row',
-            alignItems: 'center',
-            paddingLeft: '0.5rem',
-            paddingRight: '0.5rem',
-
-            [media.lessThan('small')]: {
-              justifyContent: 'flex-end',
-            },
-            [media.lessThan('large')]: {
-              marginRight: 10,
-            },
-            [media.between('small', 'medium')]: {
-              width: 'calc(100% / 3)',
-            },
-            [media.between('medium', 'xlarge')]: {
-              width: 'calc(100% / 6)',
-            },
-            [media.greaterThan('small')]: {
-              minWidth: 120,
-            },
-          }}>
-          <input
-            css={{
-              appearance: 'none',
-              background: 'transparent',
-              border: 0,
-              color: colors.white,
-              fontSize: 18,
-              fontWeight: 300,
-              fontFamily: 'inherit',
-              position: 'relative',
-              padding: '5px 5px 5px 29px',
-              backgroundImage: 'url(/search.svg)',
-              backgroundSize: '16px 16px',
-              backgroundRepeat: 'no-repeat',
-              backgroundPositionY: 'center',
-              backgroundPositionX: '5px',
-
-              ':focus': {
-                outline: 0,
-                backgroundColor: colors.lighter,
-                borderRadius: '0.25rem',
-              },
-
-              [media.lessThan('large')]: {
-                fontSize: 16,
-              },
-              [media.greaterThan('small')]: {
-                width: '100%',
-              },
-              [media.lessThan('small')]: {
-                width: '16px',
-                transition: 'width 0.2s ease, padding 0.2s ease',
-                paddingLeft: '16px',
-
-                ':focus': {
-                  paddingLeft: '29px',
-                  width: '8rem',
-                  outline: 'none',
-                },
-              },
-            }}
-            id="algolia-doc-search"
-            type="search"
-            placeholder="Search docs"
-            aria-label="Search docs"
-          />
-        </form>
 
         <div
           css={{

src/layouts/index.js

@@ -24,17 +24,6 @@ import 'css/reset.css';
 import 'css/algolia.css';
 
 class Template extends Component {
-  componentDidMount() {
-    // Initialize Algolia search.
-    // TODO Is this expensive? Should it be deferred until a user is about to search?
-    // eslint-disable-next-line no-undef
-    docsearch({
-      apiKey: '36221914cce388c46d0420343e0bb32e',
-      indexName: 'react',
-      inputSelector: '#algolia-doc-search',
-    });
-  }
-
   render() {
     const {children, location} = this.props;