# @flayyer/flayyer-types

> Flayyer type definition for Typescript templates

Latest version **1.11.2** (published 2021-05-11) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @flayyer/flayyer-types
pnpm add @flayyer/flayyer-types
yarn add @flayyer/flayyer-types
bun add @flayyer/flayyer-types
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.11.2 |
| Published | 2021-05-11 |
| First published | 2020-11-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 35.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Patricio Lopez |
| Maintainers | lopezjurip |
| Keywords | flayyer |

## Links

- npm: https://www.npmjs.com/package/@flayyer/flayyer-types
- Repository: https://github.com/flayyer/flayyer-types
- Homepage: https://github.com/flayyer/flayyer-types#readme
- Issues: https://github.com/flayyer/flayyer-types/issues
- npm.io page: https://npm.io/package/@flayyer/flayyer-types

## Recent versions

- 1.11.2 (latest) — 2021-05-11
- 1.11.1 — 2021-05-07
- 1.11.0 — 2021-04-26
- 1.10.0 — 2021-04-26
- 1.9.0 — 2021-04-21
- 1.8.0 — 2021-04-17
- 1.7.1 — 2021-04-08
- 1.7.0 — 2021-04-08
- 1.6.2 — 2021-04-08
- 1.6.1 — 2021-04-02
- 1.6.0 — 2021-04-02
- 1.5.0 — 2021-03-15
- 1.4.0 — 2021-03-15
- 1.3.0 — 2021-01-15
- 1.2.4 — 2021-01-08
- … 6 more at https://npm.io/package/@flayyer/flayyer-types/versions

## README

# @flayyer/flayyer-types

![npm-version](https://badgen.net/npm/v/@flayyer/flayyer-types)
![downloads](https://badgen.net/npm/dt/@flayyer/flayyer-types)
![size](https://badgen.net/bundlephobia/minzip/@flayyer/flayyer-types)
![tree-shake](https://badgen.net/bundlephobia/tree-shaking/@flayyer/flayyer-types)

Flayyer type definition for Typescript templates created with [create-flayyer-app](https://github.com/flayyer/create-flayyer-app/).

**👉 Want to learn more about rendering images? Visit as at [flayyer.com](https://flayyer.com?ref=flayyer-types)**

**📖 Checkout our official documentation: [docs.flayyer.com](https://docs.flayyer.com/docs/advanced/typescript)**

## Install

```sh
npm install --save-dev @flayyer/flayyer-types

yarn add --dev @flayyer/flayyer-types
```

## Usage

The provided `TemplateProps<T>` accepts a generic object type for the possible variables passed to the template. Keep in mind not every variable is guaranteed to be present, this is the reason why every variable will be marked as _possibly undefined_.

```tsx
import React from "react";
import { TemplateProps } from "@flayyer/flayyer-types";

export default function SimpleTemplate({ variables }: TemplateProps) {
  const title = variables.title; // type is `string | undefined`;
  return (
    <div>
      {title && <h1>{title}</h1>}
    </div>
  );
}
```

Since URL serialization converts `Date` and `number` to strings, every field type will be typed as `string | undefined`. Objects and arrays will be also typed using a recursive strategy.

```tsx
import React from "react";
import { TemplateProps } from "@flayyer/flayyer-types";
import { Variable as V, Static } from "@flayyer/variables";

// Example:
export const schema = V.Object({
  title: V.String({ description: "Show this on https://flayyer.com" }),
  count: V.Integer({ title: "Count of items" }),
  price: V.Number({ default: 10.0 }),
  createdAt: V.Optional(V.String({ format: "date-time" })),
  object: V.Object({
    name: V.String(),
    age: V.Integer(),
  }),
  array: V.Array(V.Number(), { description: "An array of numbers" }),
});

type Variables = Static<typeof schema>;

export default function Template({ 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>
  );
}
```

### Platform information

Sometimes we can identify which platform your link are being shared on. You can get this information via the `agent` prop.

```tsx
import React from "react";
import { TemplateProps, FlayyerAgentName } from "@flayyer/flayyer-types";

export default function MainTemplate({ agent }: TemplateProps) {
  if (agent.name === FlayyerAgentName.WHATSAPP) {
    // Custom rules for squared template
    return ...
  } else {
    // Default 1200x630 banner.
    return ...
  }
}
```

Handle multiple locales (languages) by reading the `locale` prop. You can use some lightweight libraries to process locale internationalization (i18n) just like: [lukeed/rosetta](https://github.com/lukeed/rosetta) and [airbnb/polyglot.js](https://github.com/airbnb/polyglot.js).

```tsx
export default function MainTemplate({ locale }: TemplateProps) {
  if (!locale) {
    // no locale info was provided
  } else if (locale === "en") {
    // ...
  } else if (locale === "es-CO") {
    // ...
  }

  // Native Intl module is supported ✅
  const formatter = new Intl.DateTimeFormat(locale);
  const humanized = formatter.format(new Date());
}
```

> NOTE: Sometimes web proxies used by crawlers ignores user's actual locale.

## Import assets

Remove Typescript warning when importing files such as images, fonts, style files, etc.
Use the following code in a `types.d.ts` file in the root fo your Flayyer project.

```ts
// types.d.ts

/// <reference types="@flayyer/flayyer-types/global" />
```

## Experimental Javascript support

You can help your IDE with typing information. Here is an working but experimental example in Visual Studio Code:

```js
import { TemplateProps } from "@flayyer/flayyer-types"; // eslint-disable-line no-unused-vars

/**
 * Make sure to default export a React component
 * @param {TemplateProps} [props] - Flayyer props.
 */
export default function JavascriptTemplate({ variables }) {
  const title = variables.title; // IDE will suggest `title` has type `string | undefined`
  // ...
}
```

## Validate Flayyer Config

This is optional but will help your IDE with IntelliSense to autocomplete and hint you.

```js
// flayyer.config.js
const { config } = require("@flayyer/flayyer-types");
require("dotenv").config();

module.exports = config({
  engine: "react",
  key: process.env.FLAYYER_KEY,
  deck: "my-deck",

  // Optionals
  name: "My Deck",
  description: "Lorem ipsum with **markdown**"
  private: false, // Make deck public on https://flayyer.com/community when `false`.
  license: "MIT",
  keywords: ["keyword"],
  sizes: ["THUMBNAIL", "BANNER", "SQUARE", "STORY"], // supported sizes
  repository: "https://github.com/flayyer/repository", // show source on https://flayyer.com/community
});
```

---
_Source: https://npm.io/package/@flayyer/flayyer-types · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._