https://github.com/useflyyer/flyyer-hook
React Hook to memoize a @flyyer/flyyer instance | https://flyyer.io
https://github.com/useflyyer/flyyer-hook
flyyer hooks og-images react react-hook typescript
Last synced: 7 months ago
JSON representation
React Hook to memoize a @flyyer/flyyer instance | https://flyyer.io
- Host: GitHub
- URL: https://github.com/useflyyer/flyyer-hook
- Owner: useflyyer
- License: mit
- Created: 2020-12-22T01:38:13.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-01-07T22:44:38.000Z (over 3 years ago)
- Last Synced: 2025-01-13T20:48:43.247Z (over 1 year ago)
- Topics: flyyer, hooks, og-images, react, react-hook, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@flyyer/flyyer-hook
- Size: 1.7 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# useFlyyer (flyyer-hook)
To create a Flyyer template and account please refer to: [Flyyer.io](https://flyyer.io?ref=flyyer-hook)
## Installation
Super lightweight React Hook to memoize a [Flyyer](https://github.com/useflyyer/flyyer-js) instance to prevent unnecessary renderings.
```sh
yarn add @flyyer/flyyer-hook @flyyer/flyyer
# or with npm:
npm install --save @flyyer/flyyer-hook @flyyer/flyyer
```
Types for [TypeScript](https://www.typescriptlang.org) are included, but if you have any issues try installing `qs` types:
```sh
yarn add --dev @types/qs
# or with npm:
npm install --save-dev @types/qs
```
## Usage
The difference between Flyyer and FlyyerRender:
* 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"_.
* 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"_.
### Flyyer
The following snippet enables our platform to analyse the content of every page to extract relevant information and use it to generate image previews.
```js
import React from "react";
import { useFlyyer } from "@flyyer/flyyer-hook";
function Head() {
const flyyer = new useFlyyer({
project: "my-project",
path: `/products/1`,
});
const url = flyyer.href();
// > https://cdn.flyyer.io/v2/my-project/_/__v=1596906866/products/1
return (
{/* Declare the original image so you can use it on your templates */}
);
}
```
Remember 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:
```js
import { useRouter } from 'next/router'
import { useFlyyer } from "@flyyer/flyyer-hook";
function SEO() {
const router = useRouter();
const flyyer = useFlyyer({
project: "my-project",
path: router.asPath,
});
// ...
}
```
### FlyyerRender
After installing this module you can format URLs.
```js
import React from "react";
import { useFlyyerRender } from "@flyyer/flyyer-hook";
function Head() {
const flyyer = useFlyyerRender({
tenant: "tenant",
deck: "deck",
template: "template",
variables: {
title: "Hello world!",
image: "https://yoursite.com/image/products/1.png",
},
});
const url = flyyer.href();
// > https://cdn.flyyer.io/render/v2/tenant/deck/template.jpeg?__v=1596906866&title=Hello+world%21&image=...
return (
);
}
```
## Development
Prepare the local environment:
```sh
yarn install
```
To run tests:
```sh
yarn test
```
## Contributing
Bug reports and pull requests are welcome on GitHub at https://github.com/useflyyer/flyyer-hook.
## License
The module is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).