feat: customizable search placeholder (#1126)

* feat: customizable search placeholder * prettier
facebook · Nov 23, 2018 · c6f3f09 · c6f3f09
1 parent 711c15d
commit c6f3f09
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/docs/guides-search.md b/docs/guides-search.md
@@ -61,6 +61,20 @@ const siteConfig = {
 };
 ```
 
+## Customizing the placeholder
+
+If you want to change the placeholder (which defaults to *Search*), add the `placeholder` field in your config. For example, you may want the search bar to display *Ask me something*:
+
+```js
+const siteConfig = {	
+  ...	
+  algolia: {	
+    ...	
+    placeholder: 'Ask me something'
+  },	
+};	
+```
+
 ## Disabling the Search Bar
 
 To disable the search bar, comment out (recommended) or delete the `algolia` section in the `siteConfig.js` file.

diff --git a/v1/lib/core/nav/HeaderNav.js b/v1/lib/core/nav/HeaderNav.js
@@ -131,13 +131,14 @@ class HeaderNav extends React.Component {
     let docGroupActive = false;
     if (link.search && this.props.config.algolia) {
       // return algolia search bar
+      const placeholder = this.props.config.algolia.placeholder || 'Search';
       return (
         <li className="navSearchWrapper reactNavSearchWrapper" key="search">
           <input
             id="search_input_react"
             type="text"
-            placeholder="Search"
-            title="Search"
+            placeholder={placeholder}
+            title={placeholder}
           />
         </li>
       );