Gatsby

Gatsby genererer statisk HTML ved build-tid og rehydraterer på klienten. CDN-scripts skal kun indlæses i browser-API’er — gatsby-browser.js er det rette sted.

@wink/elements npm package Installer og indlæs CDN-bundtet med TypeScript-typer.

Installér

npm install @wink/elements

Indlæs via gatsby-browser.js

onClientEntry API’en kører én gang, så snart Gatsbys runtime initialiseres i browseren:

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

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

Miljøvariabler

Gatsby eksponerer kun variabler med præfikset GATSBY_ til browser-bundtet:

GATSBY_WINK_CLIENT_ID=your-client-id

GATSBY_WINK_CLIENT_ID=your-client-id

Brug i sider og komponenter

import React from 'react';

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

TypeScript

Gatsby bruger React, så tilføj de samme JSX intrinsic deklarationer som i React-integrationen:

// Se /integrations/react for den fulde deklarationsfil

gatsby-ssr.js — ingen ændringer nødvendige

Du behøver ikke ændre gatsby-ssr.js. <wink-*> tags renderer som almindelige HTML-elementer i den statiske output, og CDN-scriptet opgraderer dem, når browseren indlæser siden.