Lewati ke konten

paket npm

Paket npm @wink/elements adalah cara tercepat untuk menambahkan komponen web Wink ke proyek JavaScript atau TypeScript mana pun. Paket ini menyediakan fungsi load() yang menyuntikkan sumber daya CDN dan deklarasi tipe TypeScript lengkap untuk semua atribut komponen.

wink-travel/wink-elements di GitHub Kode sumber, referensi API, dan instruksi kontribusi.

Instalasi

npm install @wink/elements

Mulai cepat

Panggil load() sekali saat aplikasi dimulai. Fungsi ini idempoten — aman dipanggil berkali-kali.

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

load({ clientId: 'YOUR_CLIENT_ID' });

Kemudian gunakan komponen Wink apa pun di HTML atau JSX Anda:

<wink-content-loader layout="HOTEL" id="YOUR_LAYOUT_ID"></wink-content-loader>

Contoh framework

Next.js (App Router)

'use client';
import { useEffect } from 'react';
import { load } from '@wink/elements';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    load({ clientId: process.env.NEXT_PUBLIC_WINK_CLIENT_ID! });
  }, []);
  return <html><body>{children}</body></html>;
}

Nuxt 3

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

export default defineNuxtPlugin(() => {
  load({ clientId: useRuntimeConfig().public.winkClientId });
});

Astro

---
import { load } from '@wink/elements';
---
<script>
  import { load } from '@wink/elements';
  load({ clientId: import.meta.env.PUBLIC_WINK_CLIENT_ID });
</script>

SvelteKit

import { load as loadWink } from '@wink/elements';
import { browser } from '$app/environment';

export function load() {
  if (browser) {
    loadWink({ clientId: import.meta.env.PUBLIC_WINK_CLIENT_ID });
  }
}

Tipe TypeScript

Semua antarmuka atribut komponen diekspor untuk digunakan di JSX, template literal, atau kamus bertipe:

import type { WinkContentLoaderAttributes, WinkLayout } from '@wink/elements';

const attrs: WinkContentLoaderAttributes = {
  layout: 'HOTEL',    // TypeScript akan mendeteksi nilai layout yang tidak valid
  id: 'abc123',
  sort: 'POPULARITY',
};

Menggunakan CDN staging

load({
  clientId: 'YOUR_CLIENT_ID',
  cdnBaseUrl: 'https://staging-elements.wink.travel',
});

API

`load(options)`

Opsi	Tipe	Wajib	Default	Deskripsi
`clientId`	`string`	Ya	—	Client ID OAuth2 Wink Anda
`configurationId`	`string`	Tidak	—	ID kustomisasi opsional
`cdnBaseUrl`	`string`	Tidak	`https://elements.wink.travel`	Ganti URL CDN

Bacaan lanjutan