Skip to content

Commit 9d11cf6

Browse files
jakewtaylorjakewtaylor
committed
Refactored into hooks. Also solves #17 
1 parent 1b5c9f1 commit 9d11cf6

File tree

4 files changed

+131
-112
lines changed

4 files changed

+131
-112
lines changed

‎build/index.d.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,11 @@ export interface Font {
88
export interface GoogleFontLoaderProps {
99
fonts: Font[];
1010
subsets?: string[];
11+
display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
1112
}
1213

13-
declare class GoogleFontLoader extends React.PureComponent<GoogleFontLoaderProps> {};
14+
declare const GoogleFontLoader: React.FC<GoogleFontLoaderProps>;
15+
// declare class GoogleFontLoader extends React.PureComponent<GoogleFontLoaderProps> {};
16+
1417

1518
export default GoogleFontLoader;

‎build/index.js

Lines changed: 91 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -4,104 +4,128 @@ Object.defineProperty(exports, "__esModule", {
44
value: true
55
});
66

7-
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
7+
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
88

99
var _react = require('react');
1010

11-
var _react2 = _interopRequireDefault(_react);
12-
1311
var _propTypes = require('prop-types');
1412

1513
var _propTypes2 = _interopRequireDefault(_propTypes);
1614

1715
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
1816

19-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
17+
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
2018

21-
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
19+
var createLink = function createLink(fonts, subsets, display) {
20+
var families = fonts.reduce(function (acc, font) {
21+
var family = font.font.replace(/ +/g, '+');
22+
var weights = (font.weights || []).join(',');
2223

23-
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
24+
return [].concat(_toConsumableArray(acc), [family + (weights && ':' + weights)]);
25+
}, []).join('|');
2426

25-
var GoogleFontLoader = function (_React$PureComponent) {
26-
_inherits(GoogleFontLoader, _React$PureComponent);
27+
var link = document.createElement('link');
28+
link.rel = 'stylesheet';
29+
link.href = 'https://fonts.googleapis.com/css?family=' + families;
2730

28-
function GoogleFontLoader() {
29-
var _ref;
31+
if (subsets && Array.isArray(subsets) && subsets.length > 0) {
32+
link.href += '&subset=' + subsets.join(',');
33+
}
3034

31-
var _temp, _this, _ret;
35+
if (display) {
36+
link.href += '&display=' + display;
37+
}
3238

33-
_classCallCheck(this, GoogleFontLoader);
39+
return link;
40+
};
3441

35-
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
36-
args[_key] = arguments[_key];
37-
}
42+
var GoogleFontLoader = function GoogleFontLoader(_ref) {
43+
var fonts = _ref.fonts,
44+
subsets = _ref.subsets,
45+
_ref$display = _ref.display,
46+
display = _ref$display === undefined ? null : _ref$display;
3847

39-
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = GoogleFontLoader.__proto__ || Object.getPrototypeOf(GoogleFontLoader)).call.apply(_ref, [this].concat(args))), _this), _this.link = null, _this.createLink = function () {
40-
var _this$props = _this.props,
41-
fonts = _this$props.fonts,
42-
subsets = _this$props.subsets;
48+
var _useState = (0, _react.useState)(createLink(fonts, subsets, display)),
49+
_useState2 = _slicedToArray(_useState, 2),
50+
link = _useState2[0],
51+
setLink = _useState2[1];
4352

53+
(0, _react.useEffect)(function () {
54+
document.head.appendChild(link);
4455

45-
var families = fonts.reduce(function (acc, font) {
46-
var family = font.font.replace(/ +/g, '+');
47-
var weights = (font.weights || []).join(',');
56+
return function () {
57+
return document.head.removeChild(link);
58+
};
59+
}, [link]);
4860

49-
acc.push(family + (weights && ':' + weights));
61+
(0, _react.useEffect)(function () {
62+
setLink(createLink(fonts, subsets, display));
63+
}, [fonts, subsets, display]);
5064

51-
return acc;
52-
}, []).join('|');
65+
return null;
66+
};
5367

54-
var link = document.createElement('link');
55-
link.rel = 'stylesheet';
56-
link.href = 'https://fonts.googleapis.com/css?family=' + families;
68+
// class GoogleFontLoader extends React.PureComponent {
69+
// link = null;
5770

58-
if (subsets && Array.isArray(subsets) && subsets.length > 0) {
59-
link.href += '&subset=' + subsets.join(',');
60-
}
71+
// createLink = () => {
72+
// const { fonts, subsets } = this.props;
6173

62-
return link;
63-
}, _this.appendLink = function () {
64-
return document.head.appendChild(_this.link);
65-
}, _this.removeLink = function () {
66-
return document.head.removeChild(_this.link);
67-
}, _this.replaceLink = function () {
68-
_this.removeLink();
69-
_this.link = _this.createLink();
70-
_this.appendLink();
71-
}, _this.render = function () {
72-
return null;
73-
}, _temp), _possibleConstructorReturn(_this, _ret);
74-
}
74+
// const families = fonts.reduce((acc, font) => {
75+
// const family = font.font.replace(/ +/g, '+');
76+
// const weights = (font.weights || []).join(',');
77+
78+
// acc.push(family + (weights && `:${weights}`));
79+
80+
// return acc;
81+
// }, []).join('|');
82+
83+
// const link = document.createElement('link');
84+
// link.rel = 'stylesheet';
85+
// link.href = `https://fonts.googleapis.com/css?family=${families}`;
86+
87+
// if (subsets && Array.isArray(subsets) && subsets.length > 0) {
88+
// link.href += `&subset=${subsets.join(',')}`;
89+
// }
90+
91+
// return link;
92+
// }
93+
94+
// appendLink = () => document.head.appendChild(this.link);
95+
96+
// removeLink = () => document.head.removeChild(this.link);
97+
98+
// replaceLink = () => {
99+
// this.removeLink();
100+
// this.link = this.createLink();
101+
// this.appendLink();
102+
// }
103+
104+
// componentDidMount () {
105+
// this.link = this.createLink();
106+
// this.appendLink();
107+
// }
108+
109+
// componentDidUpdate (prevProps) {
110+
// if (JSON.stringify(prevProps.fonts) !== JSON.stringify(this.props.fonts)) {
111+
// this.replaceLink();
112+
// }
113+
// }
114+
115+
// componentWillUnmount () {
116+
// this.removeLink();
117+
// }
75118

76-
_createClass(GoogleFontLoader, [{
77-
key: 'componentDidMount',
78-
value: function componentDidMount() {
79-
this.link = this.createLink();
80-
this.appendLink();
81-
}
82-
}, {
83-
key: 'componentDidUpdate',
84-
value: function componentDidUpdate(prevProps) {
85-
if (JSON.stringify(prevProps.fonts) !== JSON.stringify(this.props.fonts)) {
86-
this.replaceLink();
87-
}
88-
}
89-
}, {
90-
key: 'componentWillUnmount',
91-
value: function componentWillUnmount() {
92-
this.removeLink();
93-
}
94-
}]);
95-
96-
return GoogleFontLoader;
97-
}(_react2.default.PureComponent);
119+
// render = () => null;
120+
// }
98121

99122
GoogleFontLoader.propTypes = {
100123
fonts: _propTypes2.default.arrayOf(_propTypes2.default.shape({
101124
font: _propTypes2.default.string.isRequired,
102125
weights: _propTypes2.default.arrayOf(_propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]))
103126
})).isRequired,
104-
subsets: _propTypes2.default.arrayOf(_propTypes2.default.string)
127+
subsets: _propTypes2.default.arrayOf(_propTypes2.default.string),
128+
display: _propTypes2.default.string
105129
};
106130

107131
exports.default = GoogleFontLoader;

‎src/index.d.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,11 @@ export interface Font {
88
export interface GoogleFontLoaderProps {
99
fonts: Font[];
1010
subsets?: string[];
11+
display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
1112
}
1213

13-
declare class GoogleFontLoader extends React.PureComponent<GoogleFontLoaderProps> {};
14+
declare const GoogleFontLoader: React.FC<GoogleFontLoaderProps>;
15+
// declare class GoogleFontLoader extends React.PureComponent<GoogleFontLoaderProps> {};
16+
1417

1518
export default GoogleFontLoader;

‎src/index.js

Lines changed: 32 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,47 @@
1-
import React from 'react';
1+
import { useEffect, useState } from 'react';
22
import PropTypes from 'prop-types';
33

4-
class GoogleFontLoader extends React.PureComponent {
5-
link = null;
4+
const createLink = (fonts, subsets, display) => {
5+
const families = fonts.reduce((acc, font) => {
6+
const family = font.font.replace(/ +/g, '+');
7+
const weights = (font.weights || []).join(',');
68

7-
createLink = () => {
8-
const { fonts, subsets } = this.props;
9+
return [
10+
...acc,
11+
family + (weights && `:${weights}`),
12+
];
13+
}, []).join('|');
914

10-
const families = fonts.reduce((acc, font) => {
11-
const family = font.font.replace(/ +/g, '+');
12-
const weights = (font.weights || []).join(',');
15+
const link = document.createElement('link');
16+
link.rel = 'stylesheet';
17+
link.href = `https://fonts.googleapis.com/css?family=${families}`;
1318

14-
acc.push(family + (weights && `:${weights}`));
15-
16-
return acc;
17-
}, []).join('|');
18-
19-
const link = document.createElement('link');
20-
link.rel = 'stylesheet';
21-
link.href = `https://fonts.googleapis.com/css?family=${families}`;
22-
23-
if (subsets && Array.isArray(subsets) && subsets.length > 0) {
24-
link.href += `&subset=${subsets.join(',')}`;
25-
}
19+
if (subsets && Array.isArray(subsets) && subsets.length > 0) {
20+
link.href += `&subset=${subsets.join(',')}`;
21+
}
2622

27-
return link;
23+
if (display) {
24+
link.href += `&display=${display}`;
2825
}
2926

30-
appendLink = () => document.head.appendChild(this.link);
27+
return link;
28+
};
3129

32-
removeLink = () => document.head.removeChild(this.link);
30+
const GoogleFontLoader = ({ fonts, subsets, display = null }) => {
31+
const [link, setLink] = useState(createLink(fonts, subsets, display));
3332

34-
replaceLink = () => {
35-
this.removeLink();
36-
this.link = this.createLink();
37-
this.appendLink();
38-
}
33+
useEffect(() => {
34+
document.head.appendChild(link);
3935

40-
componentDidMount () {
41-
this.link = this.createLink();
42-
this.appendLink();
43-
}
36+
return () => document.head.removeChild(link);
37+
}, [link]);
4438

45-
componentDidUpdate (prevProps) {
46-
if (JSON.stringify(prevProps.fonts) !== JSON.stringify(this.props.fonts)) {
47-
this.replaceLink();
48-
}
49-
}
39+
useEffect(() => {
40+
setLink(createLink(fonts, subsets, display));
41+
}, [fonts, subsets, display]);
5042

51-
componentWillUnmount () {
52-
this.removeLink();
53-
}
54-
55-
render = () => null;
56-
}
43+
return null;
44+
};
5745

5846
GoogleFontLoader.propTypes = {
5947
fonts: PropTypes.arrayOf(
@@ -66,6 +54,7 @@ GoogleFontLoader.propTypes = {
6654
}),
6755
).isRequired,
6856
subsets: PropTypes.arrayOf(PropTypes.string),
57+
display: PropTypes.string,
6958
};
7059

7160
export default GoogleFontLoader;

0 commit comments

Comments
 (0)