/
index.ts
35 lines (30 loc) · 828 Bytes
/
index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import { useEffect, useState } from 'react'
/**
* React FontFace, a hook to load fonts asynchronously
*
* @param family
* @param source
* @param descriptors
*
* @see https://react-hooks-library.vercel.app/core/useFont
*/
export function useFont(
family: string,
source: string | Blob,
descriptors?: FontFaceDescriptors
) {
const [loaded, setLoaded] = useState(true)
const [error, setError] = useState(false)
const [font, setFont] = useState<FontFace | null>(null)
useEffect(() => {
const font = new FontFace(family, `url(${source})`, descriptors)
setFont(font)
setLoaded(false)
font
.load()
.then(() => document.fonts.add(font))
.catch(() => setError(true))
.finally(() => setLoaded(true))
}, [descriptors, family, source])
return { loaded, error, font }
}