宮水の日記

宮水の日記

エンジニア3年目です\( ˆoˆ )/

react-helmet【JSライブラリ】

JSライブラリを1日1つ紹介する

1日1つJSのライブラリを調べます。

① ライブラリに関するドキュメントを最初から最後まで読む
② 実際に使ってみる or 使い方を調べる
③ ライブラリを3行で説明する


本日は、react-helmetのドキュメントを読んで実際に業務で使っているところを調べました。

ドキュメント

今回読んだドキュメントはこちらです。
github.com

Philosophy、Motivation、Back Story

見当たらなかったです...

実際に使ってみる

npm install --save react-helmet
import React from "react";
import {Helmet} from "react-helmet";

class App extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <meta charSet="utf-8" />
                <title>My Title</title>
                <link rel="canonical" href="http://mysite.com/example" />
            </Helmet>
            ...
        </div>
    );
  }
};

export default App;

このように、head要素にあるmetaタグやtitleを設定できるライブラリのようです!
f:id:kattyan53:20200212160859p:plain

ライブラリを使わなかったときのtitleは「React App」なので、ちゃんと上書きされていることがわかりますね。
f:id:kattyan53:20200212161208p:plain

わからなかったところ

public/index.html でも直接指定できると思うんですが、わざわざこのライブラリを使うメリットって...
Quipperのリポジトリはindex.htmlが同じでこのreact-helmetを使うとメタタグが上書きできるからいいってことでしょうか...?

3行でまとめる

react-helmetを導入すると、

  • React上でメタタグを編集できる!

 

以上です!