Added support for the 'text' query string.

README.md

@@ -44,7 +44,7 @@ const App = () => (
 
 ## Props
 
-The Component takes two props: `fonts` and `subsets`.
+The Component takes three props: `fonts`, `subsets` and `text`.
 
 #### `fonts`
 `fonts` should be an array of objects describing the fonts you want to load:
@@ -61,7 +61,10 @@ The Component takes two props: `fonts` and `subsets`.
 ```
 
 #### `subsets`
-`subsets` should be an array of subsets you want to load. **This prop is optional** - if you do not specify a `subsets` prop then the 'subset' query param will be omitted from the URL and only latin will be loaded.
+`subsets` should be an array of subsets you want to load. **This prop is optional and shouldn't be used with `text`** - if you do not specify a `subsets` prop then the 'subset' query param will be omitted from the URL and only latin will be loaded.
+
+#### `text`
+`text` should be a string containing the characters you wan't the loaded font files to contain. **This prop is optional and shouldn't be used with `subsets`** - if you do not specify a `text` prop then the 'text' query param will be omitted from the URL.
 
 ```JavaScript
 ['cyrillic-ext', 'greek']

src/index.d.ts

@@ -9,10 +9,9 @@ export interface GoogleFontLoaderProps {
     fonts: Font[];
     subsets?: string[];
     display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
+    text?: string;
 }
 
 declare const GoogleFontLoader: React.FC<GoogleFontLoaderProps>;
-// declare class GoogleFontLoader extends React.PureComponent<GoogleFontLoaderProps> {};
-
 
 export default GoogleFontLoader;

src/index.js

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
-const createLink = (fonts, subsets, display) => {
+const createLink = (fonts, subsets, display, text) => {
     const families = fonts.reduce((acc, font) => {
         const family = font.font.replace(/ +/g, '+');
         const weights = (font.weights || []).join(',');
@@ -13,9 +13,14 @@ const createLink = (fonts, subsets, display) => {
     }, []).join('|');
 
     const link = document.createElement('link');
+
     link.rel = 'stylesheet';
     link.href = `https://fonts.googleapis.com/css?family=${families}`;
 
+    if (text) {
+        link.href += `&text=${encodeURIComponent(text)}`;
+    }
+
     if (subsets && Array.isArray(subsets) && subsets.length > 0) {
         link.href += `&subset=${subsets.join(',')}`;
     }
@@ -27,8 +32,14 @@ const createLink = (fonts, subsets, display) => {
     return link;
 };
 
-const GoogleFontLoader = ({ fonts, subsets, display = null }) => {
-    const [link, setLink] = useState(createLink(fonts, subsets, display));
+const GoogleFontLoader = ({ fonts, subsets, display = null, text = null }) => {
+    const [link, setLink] = useState(createLink(fonts, subsets, display, text));
+
+    useEffect(() => {
+        if (subsets && text) {
+            console.warn("You've supplied react-google-font-loader with the props 'text' and 'subsets', this is unnecessary. https://developers.google.com/fonts/docs/getting_started");
+        }
+    }, [subsets, text]);
 
     useEffect(() => {
         document.head.appendChild(link);
@@ -37,8 +48,8 @@ const GoogleFontLoader = ({ fonts, subsets, display = null }) => {
     }, [link]);
 
     useEffect(() => {
-        setLink(createLink(fonts, subsets, display));
-    }, [fonts, subsets, display]);
+        setLink(createLink(fonts, subsets, display, text));
+    }, [fonts, subsets, display, text]);
 
     return null;
 };
@@ -55,6 +66,7 @@ GoogleFontLoader.propTypes = {
     ).isRequired,
     subsets: PropTypes.arrayOf(PropTypes.string),
     display: PropTypes.string,
+    text: PropTypes.string,
 };
 
 export default GoogleFontLoader;