useFlayyer (flayyer-hook)
To create a Flayyer template and account please refer to: flayyer.com
Installation
Super lightweight React Hook to memoize a Flayyer instance to prevent unnecessary renderings.
yarn add @flayyer/flayyer-hook @flayyer/flayyer
# or with npm:
npm install --save @flayyer/flayyer-hook @flayyer/flayyer
Types for TypeScript are included, but if you have any issues try installing qs
types:
yarn add --dev @types/qs
# or with npm:
npm install --save-dev @types/qs
Usage
The main difference between Flayyer.io
and Flayyer.ai
is:
- Flayyer.io requires you to explicitly declare template and variables for the images to render.
- Flayyer.ai uses the rules defined on your dashboard to decide how to handle every image, then fetches and analyse the website for variables and information to render the image.
In simple words:
- Flayyer.io like saying "render an image with using this template and these explicit variables."
- Flayyer.ai like saying "render images based on the content of this route."
Flayyer.ai
This is the easiest way to use Flayyer. The following snippet enables our platform to analyse the content of every page to extract relevant information and use it to generate image previews.
import React from "react";
import { useFlayyerAI } from "@flayyer/flayyer-hook";
function Head() {
const flayyer = new useFlayyerAI({
project: "my-project",
path: `/products/1`,
});
const url = flayyer.href();
// > https://flayyer.ai/v2/my-project/_/__v=1596906866/products/1
return (
<head>
<meta property="og:image" content={url} />
<meta name="twitter:image" content={url} />
{/* Declare the original image so you can use it on your templates */}
<meta property="flayyer:image" content="https://yoursite.com/image/products/1.png" />
</head>
);
}
Remember to dynamically get the current path for each page. If you are using Next.js you should probably do it like this:
import { useRouter } from 'next/router'
import { useFlayyerAI } from "@flayyer/flayyer-hook";
function SEO() {
const router = useRouter();
const flayyer = useFlayyerAI({
project: "my-project",
path: router.asPath,
});
// ...
}
Flayyer.io
After installing this module you can format URLs.
import React from "react";
import { useFlayyerIO } from "@flayyer/flayyer-hook";
function Head() {
const flayyer = useFlayyerIO({
tenant: "tenant",
deck: "deck",
template: "template",
variables: {
title: "Hello world!",
image: "https://yoursite.com/image/products/1.png",
},
});
const url = flayyer.href();
// > https://flayyer.io/v2/tenant/deck/template.jpeg?__v=1596906866&title=Hello+world%21&image=...
return (
<head>
<meta property="og:image" content={url} />
<meta name="twitter:image" content={url} />
</head>
);
}
Development
Prepare the local environment:
yarn install
To run tests:
yarn test
Contributing
Bug reports and pull requests are welcome on GitHub at https://github.com/flayyer/flayyer-hook.
License
The module is available as open source under the terms of the MIT License.