Gatsby

Gatsby generuje statický HTML při sestavení a na klientovi jej znovu aktivuje. CDN skripty musí být načítány pouze v prohlížečových API — gatsby-browser.js je správné místo.

@wink/elements npm balíček Nainstalujte a načtěte CDN balíček s typy pro TypeScript.

Instalace

npm install @wink/elements

Načtení přes gatsby-browser.js

API onClientEntry se spustí jednou hned, jakmile se runtime Gatsby inicializuje v prohlížeči:

import { load } from '@wink/elements';

export function onClientEntry() {
  load({ clientId: process.env.GATSBY_WINK_CLIENT_ID });
}

Proměnné prostředí

Gatsby zpřístupňuje do balíčku prohlížeče pouze proměnné začínající na GATSBY_:

GATSBY_WINK_CLIENT_ID=your-client-id

GATSBY_WINK_CLIENT_ID=your-client-id

Použití na stránkách a v komponentách

import React from 'react';

export default function HotelsPage() {
  return (
    <main>
      <wink-content-loader layout="HOTEL" id="YOUR_LAYOUT_ID" />
      <wink-lookup />
    </main>
  );
}

TypeScript

Gatsby používá React, proto přidejte stejné JSX intrinsic deklarace jako v React integraci:

// Viz /integrations/react pro kompletní deklaraci

gatsby-ssr.js — není potřeba měnit

Nemusíte upravovat gatsby-ssr.js. Tagy <wink-*> se ve statickém výstupu renderují jako běžné HTML elementy a CDN skript je v prohlížeči při načtení stránky vylepší.