Upgrade to react-head v3 API

tizmagik · Aug 19, 2018 · 00ccda7 · 00ccda7
1 parent 7989654
commit 00ccda7
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 24 deletions.
diff --git a/example/src/Contact.js b/example/src/Contact.js
@@ -1,23 +1,27 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react';
-import { HeadTag } from 'react-head';
-import { Link } from 'react-router-dom';
+import { Link, Title, Meta } from 'react-head';
+import { Link as RouterLink } from 'react-router-dom';
 import logo from './react.svg';
 import './Contact.css';
 
 const Contact = () => (
   <div className="Contact">
-    <HeadTag tag="title">Contact | Example react-head App</HeadTag>
-    <HeadTag tag="link" rel="canonical" content="http://jeremygayed.com/" />
-    <HeadTag tag="meta" name="keywords" content="Contact,Example,React,Header" />
+    <Title>Contact | Example react-head App</Title>
+    <Link rel="canonical" content="http://jeremygayed.com/" />
+    <Meta name="keywords" content="Contact,Example,React,Header" />
     <div className="Contact-header">
       <img src={logo} className="Contact-logo" alt="logo" />
       <h2>react-head contact us page</h2>
     </div>
     <p className="Contact-intro">
-      View the example code in <code>src/Contact.js</code>. Note that this works isomorphically.
+      View the example code in <code>src/Contact.js</code>. Note that this works
+      isomorphically.
     </p>
-    <p>Click the example home page below to see how the Header tags will update</p>
-    <Link to="/">Home</Link>
+    <p>
+      Click the example home page below to see how the Header tags will update
+    </p>
+    <RouterLink to="/">Home</RouterLink>
     <ul className="Contact-resources">
       <li>
         <a href="https://github.com/tizmagik/react-head">Docs</a>

diff --git a/example/src/Home.js b/example/src/Home.js
@@ -1,17 +1,18 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react';
-import { HeadTag, Style } from 'react-head';
-import { Link } from 'react-router-dom';
+import { Link, Meta, Title, Style } from 'react-head';
+import { Link as RouterLink } from 'react-router-dom';
 import logo from './react.svg';
 import './Home.css';
 
 const Home = () => (
   <div className="Home">
-    <HeadTag tag="title">Home | Example react-head App</HeadTag>
+    <Title>Home | Example react-head App</Title>
     <Style>{`p {
       color: #121212;
     }`}</Style>
-    <HeadTag tag="link" rel="canonical" content="http://jeremygayed.com/" />
-    <HeadTag tag="meta" name="example" content="whatever" />
+    <Link rel="canonical" content="http://jeremygayed.com/" />
+    <Meta name="example" content="whatever" />
     <div className="Home-header">
       <img src={logo} className="Home-logo" alt="logo" />
       <h2>react-head example</h2>
@@ -24,7 +25,7 @@ const Home = () => (
       Click the example contact page below to see how the Header tags will
       update
     </p>
-    <Link to="/contact">Contact Page</Link>
+    <RouterLink to="/contact">Contact Page</RouterLink>
     <ul className="Home-resources">
       <li>
         <a href="https://github.com/tizmagik/react-head">Docs</a>

diff --git a/example/src/client.js b/example/src/client.js
@@ -1,11 +1,14 @@
-import App from './App';
 import BrowserRouter from 'react-router-dom/BrowserRouter';
 import React from 'react';
 import { hydrate } from 'react-dom';
+import { HeadProvider } from 'react-head';
+import App from './App';
 
 hydrate(
   <BrowserRouter>
-    <App />
+    <HeadProvider>
+      <App />
+    </HeadProvider>
   </BrowserRouter>,
   document.getElementById('root')
 );

diff --git a/example/src/server.js b/example/src/server.js
@@ -2,10 +2,10 @@ import React from 'react';
 import { StaticRouter } from 'react-router-dom';
 import express from 'express';
 import { renderToString } from 'react-dom/server';
-import { HeadCollector } from 'react-head';
+import { HeadProvider } from 'react-head';
 import App from './App';
 
-const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
+const assets = require(process.env.RAZZLE_ASSETS_MANIFEST); // eslint-disable-line
 
 const server = express();
 server
@@ -16,9 +16,9 @@ server
     const headTags = [];
     const markup = renderToString(
       <StaticRouter context={context} location={req.url}>
-        <HeadCollector headTags={headTags}>
+        <HeadProvider headTags={headTags}>
           <App />
-        </HeadCollector>
+        </HeadProvider>
       </StaticRouter>
     );
 
@@ -32,10 +32,16 @@ server
         <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
         <meta charSet='utf-8' />
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        ${assets.client.css ? `<link rel="stylesheet" href="${assets.client.css}">` : ''}
-        ${process.env.NODE_ENV === 'production'
-          ? `<script src="${assets.client.js}" defer></script>`
-          : `<script src="${assets.client.js}" defer crossorigin></script>`}
+        ${
+          assets.client.css
+            ? `<link rel="stylesheet" href="${assets.client.css}">`
+            : ''
+        }
+        ${
+          process.env.NODE_ENV === 'production'
+            ? `<script src="${assets.client.js}" defer></script>`
+            : `<script src="${assets.client.js}" defer crossorigin></script>`
+        }
           ${renderToString(headTags)}
     </head>
     <body>