jakewtaylor · November 28, 2018 23:19 · Nov 28, 2018 · Nov 28, 2018 · Nov 28, 2018
diff --git a/_README.md b/_README.md
@@ -20,8 +20,8 @@ const App = () => (
       },
     ]} />
 
-    <p style={{ fontFamily: 'Roboto Mono, monospaced' }}>I'll be in Roboto Mono!</p>
-    <p style={{ fontFamily: 'Roboto, sans-serif' }}>I'll be in Roboto!</p>
+    <p style={{ fontFamily: 'Roboto Mono, monospaced' }}>This will be in Roboto Mono!</p>
+    <p style={{ fontFamily: 'Roboto, sans-serif' }}>This will be in Roboto!</p>
   </>
 );
 ```
diff --git a/_README.md b/_README.md
@@ -6,7 +6,7 @@ You simply pass it a config array and it will load the fonts for you by appendin
 
 Example usage:
 
-```
+```JavaScript
 const App = () => (
   <>
     <GoogleFontLoader fonts={[

diff --git a/GoogleFontLoader.js b/GoogleFontLoader.js
@@ -0,0 +1,51 @@
+import React from 'react';
+
+class GoogleFontLoader extends React.PureComponent {
+    link = null;
+
+    createLink = () => {
+        const { fonts } = this.props;
+
+        const families = fonts.reduce((acc, font) => {
+            const family = font.font.replace(/ +/g, '+');
+            const weights = font.weights.join(',');
+
+            acc.push(`${family}:${weights}`);
+
+            return acc;
+        }, []).join('|');
+
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = `https://fonts.googleapis.com/css?family=${families}`;
+
+        return link;
+    }
+
+    appendLink = () => document.head.appendChild(this.link);
+    removeLink = () => document.head.removeChild(this.link);
+    replaceLink = () => {
+        this.removeLink();
+        this.link = this.createLink();
+        this.appendLink();
+    }
+
+    componentDidMount () {
+        this.link = this.createLink();
+        this.appendLink();
+    }
+
+    componentDidUpdate (prevProps) {
+        if (JSON.stringify(prevProps.fonts) !== JSON.stringify(this.props.fonts)) {
+            this.replaceLink();
+        }
+    }
+
+    componentWillUnmount () {
+        this.removeLink();
+    }
+
+    render = () => null;
+};
+
+export default GoogleFontLoader;
diff --git a/_README.md b/_README.md
@@ -0,0 +1,27 @@
+# GoogleFontLoader
+
+This is a _really_ simple component that can automatically handle loading Google fonts for you.
+
+You simply pass it a config array and it will load the fonts for you by appending a `<link />` tag to the document head. It will update itself if the config changes, and will remove itself on unmount.
+
+Example usage:
+
+```
+const App = () => (
+  <>
+    <GoogleFontLoader fonts={[
+      {
+        font: 'Roboto',
+        weights: [400],
+      },
+      {
+        font: 'Roboto Mono',
+        weights: [400, 700],
+      },
+    ]} />
+
+    <p style={{ fontFamily: 'Roboto Mono, monospaced' }}>I'll be in Roboto Mono!</p>
+    <p style={{ fontFamily: 'Roboto, sans-serif' }}>I'll be in Roboto!</p>
+  </>
+);
+```
No results found