Skip to main content

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>  );}