React-adobe-fonts NPM

react-adobe-fonts

A React library to use Adobe Fonts

Install

npm install react-adobe-fonts

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

react react-hooks adobe-fonts typekit

@infinitebrahmanuniverse/nolb-react-ad @everything-registry/sub-chunk-2538

0.1.0

2 years ago