Gatsby

Gatsby genererar statisk HTML vid byggtid och återaktiverar på klienten. CDN-skript måste laddas endast i webbläsar-API:er — gatsby-browser.js är rätt plats.

@wink/elements npm package Installera och ladda CDN-bunten med TypeScript-typer.

Installera

npm install @wink/elements

Ladda via gatsby-browser.js

onClientEntry API körs en gång så snart Gatsbys runtime initieras i webbläsaren:

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

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

Miljövariabler

Gatsby exponerar endast variabler som börjar med GATSBY_ till webbläsarpaketet:

GATSBY_WINK_CLIENT_ID=your-client-id

GATSBY_WINK_CLIENT_ID=your-client-id

Använd i sidor och 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 använder React, så lägg till samma JSX-intrinsic-deklarationer som React-integrationen:

// Se /integrations/react för hela deklarationsfilen

gatsby-ssr.js — inga ändringar behövs

Du behöver inte ändra gatsby-ssr.js. <wink-*>-taggarna renderas som vanliga HTML-element i den statiska utdata, och CDN-skriptet uppgraderar dem när webbläsaren laddar sidan.