diff --git a/README.md b/README.md index 2c2c0d8..60c7beb 100644 --- a/README.md +++ b/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'] diff --git a/src/index.d.ts b/src/index.d.ts index 4c86ebb..dadfefc 100644 --- a/src/index.d.ts +++ b/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; -// declare class GoogleFontLoader extends React.PureComponent {}; - export default GoogleFontLoader; diff --git a/src/index.js b/src/index.js index f984289..07e4f5a 100644 --- a/src/index.js +++ b/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;