https://github.com/p-chan/react-adobe-fonts
A React library to use Adobe Fonts
https://github.com/p-chan/react-adobe-fonts
adobe-fonts react react-hooks typekit
Last synced: 10 months ago
JSON representation
A React library to use Adobe Fonts
- Host: GitHub
- URL: https://github.com/p-chan/react-adobe-fonts
- Owner: p-chan
- Created: 2022-04-17T13:29:14.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-11-06T20:39:35.000Z (over 1 year ago)
- Last Synced: 2024-12-09T08:51:46.170Z (over 1 year ago)
- Topics: adobe-fonts, react, react-hooks, typekit
- Language: TypeScript
- Homepage: https://npm.im/react-adobe-fonts
- Size: 312 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# react-adobe-fonts
> A React library to use Adobe Fonts
## Install
```sh
npm install react-adobe-fonts
```
or
```sh
yarn add react-adobe-fonts
```
## Usage
### Component
```tsx
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 (
isLoading: {isLoading ? 'true' : 'false'}
isActive: {isActive ? 'true' : 'false'}
)
}
```
### Hooks
```tsx
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 (
isLoading: {isLoading ? 'true' : 'false'}
isActive: {isActive ? 'true' : 'false'}
)
}
```
### 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](https://helpx.adobe.com/fonts/using/embed-codes.html) for more details.
## Author
[@p-chan](https://github.com/p-chan)
## License
MIT