Como manipular/ mexer no Head das páginas React utilizando o React Helmet da NFL

Logo do React e do React Helmet

Olá pessoas, tudo bem com vocês? Recentemente tenho dedicado boa parte do meu tempo em um projeto baseado no Twitter para ser apresentado em um Workshop presencial de React na Caelum.

Esse projeto possui um compilado de coisas que são bastante úteis no dia-a-dia com aplicações React e em homenagem ao Danilo Vitoriano resolvi escrever esse post, pegando um dos tópicos em particular, que é a manipulação do Head da página com React :)

Em uma aplicação que possui rotas/páginas, é normal que o title da página seja alterado conforme vamos navegando entre suas páginas.

Title da página trocando em uma aplicação React

E caso você queira aprender mais sobre Front End comigo, confere meu canal no YoutTube #DevSoutinho ;)

Um passo de cada vez, primeiro o setup inicial e vamo que vamo!

Para ficar mais fácil de absorver os conceitos da biblioteca propriamente dita, vamos utilizar um projetinho já pronto utilizando o React Router v4 de uma forma bem simples e direta que explico nesse post:

Roteamento no React com os poderes do React Router v4

Por muito tempo, eu tive muitas dúvidas com relação a isso no React, até que lembrei que poderia fazer algo somente adicionando um document.title na função render do componente, algo nessa linha:

class App extends Component {
  render() {
    document.title = 'Home - React Router com Helmet'
    return (
      <div className="App">
<header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          <Link to="/sobre">Ir para a página sobre \o/</Link>
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

Porém, quando precisei manipular diversas outras informações no head de uma página específica (como meta tags entre algumas outras configurações), foi um pouquinho mais sofrido, pois eu precisava criar cada um dos elementos na mão e ficar injetando-os no head, em cada uma das páginas.

class Sobre extends Component {
  render() {
    document.title = 'Sobre - React Router com Helmet'
    // Uma meta tag só...
    const themeColor = document.createElement('meta')
    themeColor.setAttribute('name','theme-color')
    themeColor.setAttribute('content', '#FF0000')
    
    document.head.insertAdjacentElement('beforeend', themeColor)

Sem contar que eu precisava lembrar de que na troca de página, os itens criados anteriormente deveriam ser removidos.

Meta tags sendo duplicadas por eu não ter removido os elementos que criei no Head

Depois de um tempo caçando na net, vi que o pessoal do time de Engenharia da NFL teve um problema parecido com manipulação de Head e criaram uma biblioteca que abstrai toda essa complexidade de manipular o head chamada React Helmet

E como usar esse tal de Helmet ai nos meus projetos?

Primeiro de tudo, devemos instalar a lib via npm com o comando:

npm install --save react-helmet

Após isso, basta irmos nos componentes que representam páginas do nosso sistema e importar a lib via import:

import Helmet from 'react-helmet'

Feito isso, tudo o que precisamos fazer é colocar esse cara dentro do return do método render no meio do nosso componente, passando um atributo title para modificar o title:

class App extends Component {
  render() {
    return (
      <div className="App">
        <Helmet title="Home - React Router com Helmet" />
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          <Link to="/sobre">Ir para a página sobre \o/</Link>
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

E caso você tenha interesse de adicionar diversas outras informações no head da página, como a meta tag de color do android que eu dei e exemplo ou para ajudar em SEO no caso de um server render ou para deixar os cards de compartilhamento bonitinhos para facebook e twitter, você pode utilizar o Helmet nesse formato:

<Helmet>
    <title>Sobre - React Router com Helmet</title>
    <meta name="theme-color" content="#FF0000"/>
</Helmet>

React Helmet fazendo o trabalho de adicionar e remover os elementos dinâmicamente

Com isso, você pode injetar informações que vem via AJAX por meio do setState do React e com isso o céu é o limite para as coisas que você pode brincar \o

Espero que o post ajude vocês em seus projetos de alguma forma e qualquer dúvida que tiver só entrar em contato comigo ou mandar nos comentários aqui em baixo.

Para quem quiser dar uma olhada direto no código, deixo para vocês uma demo neste link e o repositório no github para quem quiser clonar com tudo pronto.

Ahh! E não deixe de olhar o repositório da lib com carinho que tem vários outros exemplos por lá :) https://github.com/nfl/react-helmet

Esse ano estou com bastante conteúdo para compartilhar e quem quiser acompanhar é só me seguir pelo Twitter ou dar uma olhada no meu site pessoal :)