{"id":23033831,"url":"https://github.com/p-chan/react-adobe-fonts","last_synced_at":"2025-08-14T15:33:08.840Z","repository":{"id":39233023,"uuid":"482530855","full_name":"p-chan/react-adobe-fonts","owner":"p-chan","description":"A React library to use Adobe Fonts","archived":false,"fork":false,"pushed_at":"2024-11-06T20:39:35.000Z","size":319,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-12-09T08:51:46.170Z","etag":null,"topics":["adobe-fonts","react","react-hooks","typekit"],"latest_commit_sha":null,"homepage":"https://npm.im/react-adobe-fonts","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/p-chan.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-17T13:29:14.000Z","updated_at":"2024-11-06T20:39:38.000Z","dependencies_parsed_at":"2024-01-01T09:49:20.542Z","dependency_job_id":"248ce1dd-5973-4a02-9c3c-1a483e4494a8","html_url":"https://github.com/p-chan/react-adobe-fonts","commit_stats":{"total_commits":106,"total_committers":3,"mean_commits":"35.333333333333336","dds":"0.26415094339622647","last_synced_commit":"80128fcfacb97fe58081b4952f07a48452915af4"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/p-chan%2Freact-adobe-fonts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/p-chan%2Freact-adobe-fonts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/p-chan%2Freact-adobe-fonts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/p-chan%2Freact-adobe-fonts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/p-chan","download_url":"https://codeload.github.com/p-chan/react-adobe-fonts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229841523,"owners_count":18132573,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["adobe-fonts","react","react-hooks","typekit"],"created_at":"2024-12-15T16:19:31.699Z","updated_at":"2024-12-15T16:19:32.252Z","avatar_url":"https://github.com/p-chan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-adobe-fonts\n\n\u003e A React library to use Adobe Fonts\n\n## Install\n\n```sh\nnpm install react-adobe-fonts\n```\n\nor\n\n```sh\nyarn add react-adobe-fonts\n```\n\n## Usage\n\n### Component\n\n```tsx\nimport { useCallback, useState } from 'react'\nimport { AdobeFonts } from 'react-adobe-fonts'\n\nconst App = () =\u003e {\n  const [isLoading, setIsLoading] = useState(false)\n  const [isActive, setIsActive] = useState(false)\n\n  const onLoading = useCallback(() =\u003e {\n    setIsLoading(true)\n  }, [])\n\n  const onActive = useCallback(() =\u003e {\n    setIsLoading(false)\n    setIsActive(true)\n  }, [])\n\n  return (\n    \u003cdiv\u003e\n      \u003cAdobeFonts kitId=\"xxx\" onLoading={onLoading} onActive={onActive} /\u003e\n\n      \u003cdiv\u003eisLoading: {isLoading ? 'true' : 'false'}\u003c/div\u003e\n      \u003cdiv\u003eisActive: {isActive ? 'true' : 'false'}\u003c/div\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n### Hooks\n\n```tsx\nimport { useCallback, useState } from 'react'\nimport { useAdobeFonts } from 'react-adobe-fonts'\n\nconst App = () =\u003e {\n  const [isLoading, setIsLoading] = useState(false)\n  const [isActive, setIsActive] = useState(false)\n\n  const onLoading = useCallback(() =\u003e {\n    setIsLoading(true)\n  }, [])\n\n  const onActive = useCallback(() =\u003e {\n    setIsLoading(false)\n    setIsActive(true)\n  }, [])\n\n  useAdobeFonts({\n    kitId: 'xxx',\n    onLoading,\n    onActive,\n  })\n\n  return (\n    \u003cdiv\u003e\n      \u003cdiv\u003eisLoading: {isLoading ? 'true' : 'false'}\u003c/div\u003e\n      \u003cdiv\u003eisActive: {isActive ? 'true' : 'false'}\u003c/div\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n### Parameters\n\n| Parameter        | Description                                                                                                                                                                           | Required |\n| :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------- |\n| `kitId`          | This value is Project ID.                                                                                                                                                             | `true`   |\n| `onLoading`      | This callback is triggered when all fonts have been requested.                                                                                                                        | `false`  |\n| `onActive`       | This callback is triggered when the fonts have rendered.                                                                                                                              | `false`  |\n| `onInactive`     | This callback is triggered when the browser does not support linked fonts _or_ if none of the fonts could be loaded.                                                                  | `false`  |\n| `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`  |\n| `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`  |\n| `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`  |\n\nSee the [Adobe Fonts Guide Line](https://helpx.adobe.com/fonts/using/embed-codes.html) for more details.\n\n## Author\n\n[@p-chan](https://github.com/p-chan)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fp-chan%2Freact-adobe-fonts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fp-chan%2Freact-adobe-fonts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fp-chan%2Freact-adobe-fonts/lists"}