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:
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
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
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
:
yarn add --dev @flyyer/types
Then on your templates:
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>
);
}