We are glad to announce we added the long awaited Variables UI support on the Flyyer.io dashboard.
This allows users to know what variables are required and optional in each template.
Now an UI Widget will be displayed based on the type of the variable. We support a hint, a default value and even an array of examples! ๐คฏ
You can start using it by upgrading @flyyer/cli
to ^1.17.0
and installing @flyyer/variables
:
yarn add --dev @flyyer/cli
yarn add @flyyer/variables
Here is an example:
import React from 'react';
import {Variable as V} from '@flyyer/variables';
import defaultImage from "../static/background.jpeg":
export const schema = V.Object({
title: V.String({
default: 'Flyyer blog entry',
}),
image: V.Optional(V.Image({
title: 'Background image URL',
default: defaultImage,
examples: ["https://example.com/img.jpeg"]
})),
date: V.Optional(V.DateTime({
description: 'Publication date',
examples: [new Date().toISOString()]
})),
authorName: V.Optional(V.String({
title: 'Author name',
examples: ['Patricio Lopez J.', 'Franco Mendez'],
}))
});
Some custom types are: V.Image
and V.Font
. We will be adding over the next weeks.
For TypeScript users you can get the inferred type of schema
as:
import {Static} from '@flyyer/variables';
type Variables = Static<typeof schema>;
Finally, you can validate and parse the incomming variables with the Validator
class from @flyyer/variables
:
import {Validator} from '@flyyer/variables';
const validator = new Validator(schema);
export default function MainTemplate(props: TemplateProps) {
const {width, height, variables, locale = 'en'} = props;
if (!validator.validate(variables)) {
// Fallback for invalid variables
return <img className="w-full h-full object-cover" src={defaultImage} />;
}
const {title, image, date, authorName} = variables;
// ...
}
Checkout flyyer/flyyer-official to see a a real project using these new feature.
Are we missing a feature? Have you found a bug? Let us know via Github: github.com/useflyyer/flyyer-variables.