From 44f52d2c8b80be5f224617e85f2301b85fa70c1b Mon Sep 17 00:00:00 2001 From: Steven Benisek Date: Wed, 20 Feb 2019 17:39:55 +0100 Subject: [PATCH 1/3] Add FontFace resource --- src/FontFace.tsx | 55 +++++++++++++++++++++++++++++++++++++++++++++ src/index.tsx | 1 + typings/global.d.ts | 7 ++++++ 3 files changed, 63 insertions(+) create mode 100644 src/FontFace.tsx create mode 100644 typings/global.d.ts diff --git a/src/FontFace.tsx b/src/FontFace.tsx new file mode 100644 index 0000000..7f35bdf --- /dev/null +++ b/src/FontFace.tsx @@ -0,0 +1,55 @@ +import React from 'react'; +import { createResource } from './createResource'; + +type Partial = { [P in keyof T]?: T[P] }; + +type FontFaceDescriptors = { + display: string; + family: string; + featureSettings: string; + stretch: string; + style: string; + unicodeRange: string; + variant: string; + variationSettings: string; + weight: string | number; +}; + +type FontProps = FontFaceDescriptors & { + family: string; + readonly loaded: Promise; + readonly status: 'unloaded' | 'loading' | 'loaded' | 'error'; +}; + +export type FontFaceProps = Partial & { + family: string; + source: string; +}; + +export const FontFaceResource = createResource( + load, + ({ family, style, weight }) => `${family}.${weight}.${style}` +); + +function load({ family, source, ...descriptors }: FontFaceProps) { + return new window.FontFace(family, source, descriptors) + .load() + .then((font: FontProps) => document.fonts.add(font)); +} + +export const FontFace: React.FC = ({ + children = null, + ...rest +}) => { + FontFaceResource.read(rest); + + if (typeof children === 'function') { + return children(); + } + + return children; +}; + +export function useFontFace(props: FontFaceProps) { + return FontFaceResource.read(props); +} diff --git a/src/index.tsx b/src/index.tsx index 0f42c11..ad3887b 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,4 +1,5 @@ export * from './Audio'; +export * from './FontFace'; export * from './Img'; export * from './Preload'; export * from './Script'; diff --git a/typings/global.d.ts b/typings/global.d.ts new file mode 100644 index 0000000..00dd501 --- /dev/null +++ b/typings/global.d.ts @@ -0,0 +1,7 @@ +interface Window { + FontFace?: any; +} + +interface Document { + fonts?: any; +} From 80496c16dd1496b6dfd30e4e3d6684ff91ab3d6d Mon Sep 17 00:00:00 2001 From: Steven Benisek Date: Wed, 20 Feb 2019 17:40:22 +0100 Subject: [PATCH 2/3] Add FontFace to example --- example/App.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/example/App.js b/example/App.js index 6a434f4..aaeeb91 100755 --- a/example/App.js +++ b/example/App.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Img, Script, Video, Audio, Stylesheet } from 'the-platform'; +import { Img, Script, Video, Audio, Stylesheet, FontFace } from 'the-platform'; function App() { return ( @@ -24,6 +24,13 @@ function App() { + + +

Yay, News Cycle

+ ); From 54e47336337b94f5106717e10591e4191f2b2236 Mon Sep 17 00:00:00 2001 From: Steven Benisek Date: Thu, 21 Feb 2019 09:26:57 +0100 Subject: [PATCH 3/3] Add FontFace to docs --- README.md | 74 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 74 insertions(+) diff --git a/README.md b/README.md index df5e92e..982cf06 100644 --- a/README.md +++ b/README.md @@ -33,6 +33,7 @@ yarn add the-platform + - [Hooks](#hooks) - [`useDeviceMotion()`](#usedevicemotion) - [`useDeviceOrientation()`](#usedeviceorientation) @@ -41,6 +42,7 @@ yarn add the-platform - [`useMedia()`](#usemedia) - [`useScript()`](#usescript) - [`useStylesheet()`](#usestylesheet) + - [`useFontFace()`](#usefontface) - [`useWindowScrollPosition()`](#usewindowscrollposition) - [`useWindowSize()`](#usewindowsize) - [Components](#components) @@ -50,6 +52,7 @@ yarn add the-platform - [`