{"id":20206510,"url":"https://github.com/useflyyer/flyyer-hook","last_synced_at":"2025-10-25T04:20:32.270Z","repository":{"id":38426389,"uuid":"323490624","full_name":"useflyyer/flyyer-hook","owner":"useflyyer","description":"React Hook to memoize a @flyyer/flyyer instance | https://flyyer.io","archived":false,"fork":false,"pushed_at":"2023-01-07T22:44:38.000Z","size":1783,"stargazers_count":1,"open_issues_count":7,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-01-13T20:48:43.247Z","etag":null,"topics":["flyyer","hooks","og-images","react","react-hook","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@flyyer/flyyer-hook","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/useflyyer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-12-22T01:38:13.000Z","updated_at":"2021-09-01T21:50:38.000Z","dependencies_parsed_at":"2023-02-08T03:02:35.935Z","dependency_job_id":null,"html_url":"https://github.com/useflyyer/flyyer-hook","commit_stats":null,"previous_names":["flayyer/flayyer-hook"],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/useflyyer%2Fflyyer-hook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/useflyyer%2Fflyyer-hook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/useflyyer%2Fflyyer-hook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/useflyyer%2Fflyyer-hook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/useflyyer","download_url":"https://codeload.github.com/useflyyer/flyyer-hook/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241644542,"owners_count":19996177,"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":["flyyer","hooks","og-images","react","react-hook","typescript"],"created_at":"2024-11-14T05:24:31.921Z","updated_at":"2025-10-25T04:20:27.235Z","avatar_url":"https://github.com/useflyyer.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# useFlyyer (flyyer-hook)\n\n![npm-version](https://badgen.net/npm/v/@flyyer/flyyer-hook)\n![downloads](https://badgen.net/npm/dt/@flyyer/flyyer-hook)\n![size](https://badgen.net/bundlephobia/minzip/@flyyer/flyyer-hook)\n![tree-shake](https://badgen.net/bundlephobia/tree-shaking/@flyyer/flyyer-hook)\n\nTo create a Flyyer template and account please refer to: [Flyyer.io](https://flyyer.io?ref=flyyer-hook)\n\n## Installation\n\nSuper lightweight React Hook to memoize a [Flyyer](https://github.com/useflyyer/flyyer-js) instance to prevent unnecessary renderings.\n\n```sh\nyarn add @flyyer/flyyer-hook @flyyer/flyyer\n\n# or with npm:\nnpm install --save @flyyer/flyyer-hook @flyyer/flyyer\n```\n\nTypes for [TypeScript](https://www.typescriptlang.org) are included, but if you have any issues try installing `qs` types:\n\n```sh\nyarn add --dev @types/qs\n\n# or with npm:\nnpm install --save-dev @types/qs\n```\n\n## Usage\n\nThe difference between Flyyer and FlyyerRender:\n\n* Flyyer uses the [rules defined on your dashboard](https://flyyer.io/dashboard/_/projects) to decide how to handle every image. It analyses your website to render a content-rich image. Let's say _\"Flyyer renders images based on the content of this route\"_.\n\n* FlyyerRender instead requires you to explicitly declare template and variables for the images to render, **giving you more control for customization**. Let's say _\"FlyyerRender renders an image using this template and these explicit variables\"_.\n\n### Flyyer\n\nThe following snippet enables our platform to analyse the content of every page to extract relevant information and use it to generate image previews.\n\n```js\nimport React from \"react\";\nimport { useFlyyer } from \"@flyyer/flyyer-hook\";\n\nfunction Head() {\n  const flyyer = new useFlyyer({\n    project: \"my-project\",\n    path: `/products/1`,\n  });\n  const url = flyyer.href();\n  // \u003e https://cdn.flyyer.io/v2/my-project/_/__v=1596906866/products/1\n\n  return (\n    \u003chead\u003e\n      \u003cmeta property=\"og:image\" content={url} /\u003e\n      \u003cmeta name=\"twitter:image\" content={url} /\u003e\n      {/* Declare the original image so you can use it on your templates */}\n      \u003cmeta property=\"flyyer:image\" content=\"https://yoursite.com/image/products/1.png\" /\u003e\n    \u003c/head\u003e\n  );\n}\n```\n\nRemember to dynamically get the current path for each page. If you are using [Next.js](https://nextjs.org/) you should probably do it like this:\n\n```js\nimport { useRouter } from 'next/router'\nimport { useFlyyer } from \"@flyyer/flyyer-hook\";\n\nfunction SEO() {\n  const router = useRouter();\n  const flyyer = useFlyyer({\n    project: \"my-project\",\n    path: router.asPath,\n  });\n\n  // ...\n}\n```\n\n### FlyyerRender\n\nAfter installing this module you can format URLs.\n\n```js\nimport React from \"react\";\nimport { useFlyyerRender } from \"@flyyer/flyyer-hook\";\n\nfunction Head() {\n  const flyyer = useFlyyerRender({\n    tenant: \"tenant\",\n    deck: \"deck\",\n    template: \"template\",\n    variables: {\n      title: \"Hello world!\",\n      image: \"https://yoursite.com/image/products/1.png\",\n    },\n  });\n  const url = flyyer.href();\n  // \u003e https://cdn.flyyer.io/render/v2/tenant/deck/template.jpeg?__v=1596906866\u0026title=Hello+world%21\u0026image=...\n\n  return (\n    \u003chead\u003e\n      \u003cmeta property=\"og:image\" content={url} /\u003e\n      \u003cmeta name=\"twitter:image\" content={url} /\u003e\n    \u003c/head\u003e\n  );\n}\n```\n\n## Development\n\nPrepare the local environment:\n\n```sh\nyarn install\n```\n\nTo run tests:\n\n```sh\nyarn test\n```\n\n## Contributing\n\nBug reports and pull requests are welcome on GitHub at https://github.com/useflyyer/flyyer-hook.\n\n## License\n\nThe module is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuseflyyer%2Fflyyer-hook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuseflyyer%2Fflyyer-hook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuseflyyer%2Fflyyer-hook/lists"}