Skip to main content

Complex variables

Variables are passed through the unique URL of a flayyer 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: ?first= and &second=, &third=, etc.

https://flayyer.io/v2/flayyer/landing/demo.png?first=Foo&second=Bar&third=Baz

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://flayyer.io/v2/flayyer/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://flayyer.io/v2/flayyer/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.

Types#

note

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

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

Terminal.app
yarn add --dev @flayyer/flayyer-types

Then on your templates:

templates/main.tsx
import React from "react";
import { TemplateProps } from "@flayyer/flayyer-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>
);
}