Gatsby

Gatsby genererer statisk HTML ved byggetidspunkt og rehydreres på klienten. CDN-skript må lastes kun i nettleser-APIer — gatsby-browser.js er riktig sted.

@wink/elements npm package Installer og last CDN-bunten med TypeScript-typer.

Installer

npm install @wink/elements

Last via gatsby-browser.js

onClientEntry-APIen kjører én gang så snart Gatsbys runtime initialiseres i nettleseren:

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

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

Miljøvariabler

Gatsby eksponerer kun variabler som starter med GATSBY_ til nettleser-bunten:

GATSBY_WINK_CLIENT_ID=your-client-id

GATSBY_WINK_CLIENT_ID=your-client-id

Bruk 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 bruker React, så legg til de samme JSX intrinsic-deklarasjonene som React-integrasjonen:

// Se /integrations/react for fullstendig deklarasjonsfil

gatsby-ssr.js — ingen endringer nødvendig

Du trenger ikke å endre gatsby-ssr.js. <wink-*>-taggene rendres som vanlige HTML-elementer i den statiske outputen, og CDN-skriptet oppgraderer dem når nettleseren laster siden.