Skip to content

p-chan/react-adobe-fonts

Repository files navigation

react-adobe-fonts

A React library to use Adobe Fonts

Install

npm install react-adobe-fonts

or

yarn add react-adobe-fonts

Usage

Component

import { useCallback, useState } from 'react'
import { AdobeFonts } from 'react-adobe-fonts'

const App = () => {
  const [isLoading, setIsLoading] = useState(false)
  const [isActive, setIsActive] = useState(false)

  const onLoading = useCallback(() => {
    setIsLoading(true)
  }, [])

  const onActive = useCallback(() => {
    setIsLoading(false)
    setIsActive(true)
  }, [])

  return (
    <div>
      <AdobeFonts kitId="xxx" onLoading={onLoading} onActive={onActive} />

      <div>isLoading: {isLoading ? 'true' : 'false'}</div>
      <div>isActive: {isActive ? 'true' : 'false'}</div>
    </div>
  )
}

Hooks

import { useCallback, useState } from 'react'
import { useAdobeFonts } from 'react-adobe-fonts'

const App = () => {
  const [isLoading, setIsLoading] = useState(false)
  const [isActive, setIsActive] = useState(false)

  const onLoading = useCallback(() => {
    setIsLoading(true)
  }, [])

  const onActive = useCallback(() => {
    setIsLoading(false)
    setIsActive(true)
  }, [])

  useAdobeFonts({
    kitId: 'xxx',
    onLoading,
    onActive,
  })

  return (
    <div>
      <div>isLoading: {isLoading ? 'true' : 'false'}</div>
      <div>isActive: {isActive ? 'true' : 'false'}</div>
    </div>
  )
}

Parameters

Parameter Description Required
kitId This value is Project ID. true
onLoading This callback is triggered when all fonts have been requested. false
onActive This callback is triggered when the fonts have rendered. false
onInactive This callback is triggered when the browser does not support linked fonts or if none of the fonts could be loaded. false
onFontLoading This callback is triggered once for each font that's loaded. The callback is called with the family name as the first argument and font variation description as the second argument. false
onFontActive This callback is triggered once for each font that renders. The callback is called with the family name as the first argument and font variation description as the second argument. false
onFontInactive This callback is triggered if the font can't be loaded. The callback is called with the family name as the first argument and font variation description as the second argument. false

See the Adobe Fonts Guide Line for more details.

Author

@p-chan

License

MIT