Complex variables

Variables are passed through the unique URL of a flyyer as queryparams.

Multiple variables

This is easy, just follow the correct queryparams standard of ? to start the queryparams and & between consecutive variables.

Here is an example: ?title= and &noop= (has no effect).

https://cdn.flyyer.io/render/v2/flyyer/default/main.png?title=Flyyer+Docs&noop=nothing

Inside the component it looks like this:

templates/main.js

import React from "react";

export default function DemoTemplate({ variables }) {
  const { first, second, third } = variables; // 👈  variables from queryparams
  // ...
}

Objects and Arrays

For arrays use this syntax: ?array[0]=a&array[1]=b. Example with an array variables named items:

https://cdn.flyyer.io/render/v2/flyyer/landing/demo.png?items[0]=apple&items[1]=pear

templates/main.js

import React from "react";

export default function DemoTemplate({ variables }) {
  const items = variables.items || []; // 👈  variables from queryparams
  // ...
}

For objects use this syntax: ?object[firstname]=a&object[lastname]=b. Example with an object variables named user:

https://cdn.flyyer.io/render/v2/flyyer/landing/demo.png?user[firstname]=John&user[lastname]=Appleseed

templates/main.js

import React from "react";

export default function DemoTemplate({ variables }) {
  const user = variables.user || {}; // 👈  variables from queryparams
  // ...
}

Of course you can mix variables and arrays, but try to keep variables simple and flat.

Types

note

This requires Typescript integration. For Experimental JavaScript support see this.

You can type the variables coming from the props. First install @flyyer/types:

Terminal.app

yarn add --dev @flyyer/types

Then on your templates:

templates/main.tsx

import React from "react";
import { TemplateProps } from "@flyyer/types";

type Variables = {
  title: string;
  count: number;
  price: number;
  createdAt: Date;
  object: {
    name: string;
    age: number;
  };
  array: [
    {
      id: number;
    },
  ];
};

export default function MainTemplate({ variables }: TemplateProps<Variables>) {
  const {
    title, // type is `string | undefined`
    count, // type is `string | undefined`
    price = 10, // type is `string | 10` because incoming values will be string!
    createdAt, // type is `string | undefined`
    object, // type is a recursive object with `string | undefined` values
    array, // type is a recursive array with `string | undefined` values
  } = variables;

  return (
    <div>
      {title && <h1>{title}</h1>}
    </div>
  );
}