feat: customizable search placeholder (#1126)

* feat: customizable search placeholder

* prettier
This commit is contained in:
maxaggedon 2018-11-23 23:27:59 +01:00 committed by Yangshun Tay
parent 711c15d3e3
commit c6f3f0958d
2 changed files with 17 additions and 2 deletions

View file

@ -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 ## Disabling the Search Bar
To disable the search bar, comment out (recommended) or delete the `algolia` section in the `siteConfig.js` file. To disable the search bar, comment out (recommended) or delete the `algolia` section in the `siteConfig.js` file.

View file

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