react-adobe-fonts

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