React Static Dynamic Title

All PostsPosts filtered by: react-static

React Static Dynamic Title

Updated: April 6, 2018 by Tony Alves

Updating the title in header in React Static

Explanation

React Static uses a library at the core called React Helmet. We will access the Head section of our pages to be able to customize our tags in the <head></head> section of our site.

Implementation

Import the Head into our page component we want to customize.

import { Head } from 'react-static'

Now update our render component to include the custom modifications. In our example, we have a prop called title that we pass to the component.

  render() {
    const { title } = this.props
    return (
      <div>
        <Head>
          <title>{title}</title>
        </Head>
        <div>
          Hello World!
        </div>
      </div>
    )
  }
}

Using Helmet Options

We can find the properties we can update in the Helmet project and the can be update through the Head component.

  <Head titleTemplate="%s | Example Site">
    <title>{title}</title>
  </Head>
© Tony Alves