इसे छोड़कर कंटेंट पर जाएं

npm पैकेज

@wink/elements npm पैकेज Wink वेब कॉम्पोनेंट्स को किसी भी JavaScript या TypeScript प्रोजेक्ट में जोड़ने का सबसे तेज़ तरीका है। यह एक load() फ़ंक्शन प्रदान करता है जो CDN संसाधनों को इंजेक्ट करता है और सभी कॉम्पोनेंट एट्रिब्यूट्स के लिए पूर्ण TypeScript टाइप घोषणाएँ देता है।

wink-travel/wink-elements GitHub पर स्रोत कोड, API संदर्भ, और योगदान निर्देश।

इंस्टॉल करें

npm install @wink/elements

त्वरित शुरुआत

ऐप स्टार्टअप पर load() को एक बार कॉल करें। यह आइडेम्पोटेंट है — इसे कई बार कॉल करना सुरक्षित है।

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

load({ clientId: 'YOUR_CLIENT_ID' });

फिर अपने HTML या JSX में कोई भी Wink कॉम्पोनेंट उपयोग करें:

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

फ्रेमवर्क उदाहरण

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 });
  }
}

TypeScript टाइप्स

सभी कॉम्पोनेंट एट्रिब्यूट इंटरफेस JSX, टेम्पलेट लिटरेचर, या टाइप्ड डिक्शनरीज़ में उपयोग के लिए निर्यात किए गए हैं:

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

const attrs: WinkContentLoaderAttributes = {
  layout: 'HOTEL',    // TypeScript अमान्य layout मान पकड़ लेगा
  id: 'abc123',
  sort: 'POPULARITY',
};

स्टेजिंग CDN का उपयोग करना

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

API

`load(options)`

विकल्प	प्रकार	आवश्यक	डिफ़ॉल्ट	विवरण
`clientId`	`string`	हाँ	—	आपका Wink OAuth2 क्लाइंट ID
`configurationId`	`string`	नहीं	—	वैकल्पिक कस्टमाइज़ेशन ID
`cdnBaseUrl`	`string`	नहीं	`https://elements.wink.travel`	CDN URL ओवरराइड करें

आगे पढ़ें