@flyyer/flyyer-hook

v3.3.2

Published

2 years ago

Flyyer.io React Hook to memoize a flyyer instance

Downloads

0High
0Medium
0Low

lopezjurip

francomendez

flyyer react react-hook

useFlyyer (flyyer-hook)

npm-version downloads size tree-shake

To create a Flyyer template and account please refer to: Flyyer.io

Installation

Super lightweight React Hook to memoize a Flyyer instance to prevent unnecessary renderings.

yarn add @flyyer/flyyer-hook @flyyer/flyyer

# or with npm:
npm install --save @flyyer/flyyer-hook @flyyer/flyyer

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 difference between Flyyer and FlyyerRender:

Flyyer uses the rules defined on your dashboard 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.

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 (
    <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="flyyer: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 { 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.

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 (
    <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/useflyyer/flyyer-hook.

License

The module is available as open source under the terms of the MIT License.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme