⚛️ React.js ve Next.js Entegrasyonu

React Uygulamaları için İran Riyali Döviz Kuru Hesaplayıcı Widget'ı

Hızlı Başlangıç Kılavuzu

Aşağıdaki React bileşenini kopyalayın ve React veya Next.js uygulamanızda gerçek zamanlı İran Riyali döviz kurlarını göstermeye başlayın!

tsx

// React Component Example
import { useEffect } from 'react';

const PashiziWidget = ({ currency = 'usd', lang = 'en' }) => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = `https://www.pashizi.com/widget/?lang=${lang}&base=${currency}`;
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, [currency, lang]);

  return <div data-pashizi-widget data-lang={lang} data-base={currency} />;
};

export default PashiziWidget;

🎮 Interactive React Demo

Try different currency and language combinations to see how the React component works with live previews and get the exact code.

🎮ETKİLEŞİMLİ DEMO YAPILANDIRICI

Özelleştir ve Canlı Önizle

Widget'ı çalışırken görmek için tercih ettiğiniz para birimini ve dili seçin. Kurulumunuz için entegrasyon kodunu kopyalayın.

💰 Para Birimi Seç

🌍 Dil Seç

Live

USD

→

Türkçe

Canlı Widget Demosu

📋 Entegrasyon Kodu

React.js Component Usagejavascript

import PashiziWidget from './PashiziWidget';

function MyComponent() {
  return (
    <div>
      <PashiziWidget currency="usd" lang="tr" />
    </div>
  );
}

export default MyComponent;

💡 Projenizde PashiziWidget bileşenini oluşturduğunuzdan emin olun.

PashiziWidget Bileşen Kodunu Göster

PashiziWidget.tsxjavascript

"use client";

import { useEffect } from "react";

interface PashiziWidgetProps {
  currency?: string;
  lang?: string;
  className?: string;
}

const PashiziWidget = ({ 
  currency = "usd", 
  lang = "en", 
  className = "" 
}: PashiziWidgetProps) => {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = `https://widget.pashizi.com/calculator?currency=${currency}&lang=${lang}`;
    script.async = true;
    script.defer = true;
    
    document.body.appendChild(script);
    
    return () => {
      if (document.body.contains(script)) {
        document.body.removeChild(script);
      }
    };
  }, [currency, lang]);

  return (
    <div
      data-pashizi-widget
      data-lang={lang}
      data-base={currency}
      className={className}
    />
  );
};

export default PashiziWidget;

📝 Kullanım Örnekleri

1. Temel USD Widget'ı

İngilizce arayüzlü basit USD döviz kuru widget'ı

Usage:

tsx

<PashiziWidget />

2. Almanca EUR

Almanca arayüzlü Euro döviz kurları

Usage:

tsx

<PashiziWidget currency="eur" lang="de" />

3. Farsça USD

Farsça arayüzlü ABD Doları kurları

Usage:

tsx

<PashiziWidget lang="fa" currency="usd" />

4. Özel Stilli CHF

Stil için özel CSS sınıfına sahip İsviçre Frangı widget'ı

Usage:

tsx

<PashiziWidget currency="eur" lang="fr" />

▲ Next.js'e Özel Yapılandırma

📁App Router (Next.js 13+)

İstemci tarafı oluşturma için bileşeninizin en üstüne "use client" yönergesini ekleyin:

tsx

"use client";

import { useEffect } from "react";

const PashiziWidget = ({ currency, lang }) => {
  // Component implementation...
};

🏗️Pages Router (Next.js 12 ve altı)

Bileşenin yalnızca istemcide çalışmasını sağlamak için dinamik içe aktarmaları kullanın:

tsx

import dynamic from 'next/dynamic';

const PashiziWidget = dynamic(() => import('../components/PashiziWidget'), {
  ssr: false
});

⚙️ Gelişmiş Yapılandırma

Bileşen Propları

Prop	Tür	Açıklama	Örnek
currency	string	Temel para birimi kodu (3 harf)	"usd"
lang	string	Arayüz dili (2 harf)	"en"
className	string?	İsteğe bağlı CSS sınıfları	"my-widget"

TypeScript Arayüzü

Daha iyi tür güvenliği için uygun TypeScript arayüzlerini tanımlayın:

tsx

interface PashiziWidgetProps {
  currency: string;
  lang: string;
  className?: string;
}

const PashiziWidget: React.FC<PashiziWidgetProps> = ({ 
  currency, 
  lang, 
  className 
}) => {
  // Component implementation...
  return (
    <div 
      data-pashizi-widget 
      data-lang={lang} 
      data-base={currency}
      className={className}
    />
  );
};

💰 Desteklenen Para Birimleri (28+)

'currency' prop'unda bu para birimi kodlarını kullanın. Tüm kurlar İran Riyali'ne (IRR) karşı görüntülenir.

💡 Kullanım Örneği

<PashiziWidget currency="eur" lang="en" />

US Dollar

usd

Euro

eur

British Pound

gbp

Japanese Yen

jpy

Swiss Franc

chf

Canadian Dollar

cad

Australian Dollar

aud

Singapore Dollar

sgd

Hong Kong Dollar

hkd

Norwegian Krone

nok

Swedish Krona

sek

Danish Krone

dkk

Malaysian Ringgit

myr

Russian Ruble

rub

Turkish Lira

try

Indian Rupee

inr

Chinese Yuan

cny

UAE Dirham

aed

Thai Baht

thb

Qatari Riyal

qar

Saudi Riyal

sar

Omani Rial

omr

Bahraini Dinar

bhd

Kuwaiti Dinar

kwd

Iraqi Dinar

iqd

Azerbaijani Manat

azn

Afghan Afghani

afn

Armenian Dram

amd

🌍 Desteklenen Diller (10)

Widget arayüzünü farklı dillerde görüntülemek için 'lang' prop'unda bu dil kodlarını kullanın.

💡 Dil Seçimi Örneği

<PashiziWidget currency="usd" lang="fa" />

This displays USD rates with Persian (Farsi) interface. Persian and Arabic support right-to-left (RTL) layouts.

English

en

Persian - فارسی

fa

German - Deutsch

de

Arabic - العربية

ar

Spanish - Español

es

French - Français

fr

Italian - Italiano

it

Dutch - Nederlands

nl

Russian - Русский

ru

Chinese - 中文

zh

✅ En İyi Uygulamalar

✅Yapın

Script yükleme ve temizleme için useEffect kullanın
useEffect'e [currency, lang] bağımlılık dizisini ekleyin
Next.js App Router için "use client" yönergesini kullanın
Uygun TypeScript arayüzlerini tanımlayın
Farklı ekran boyutlarında test edin

❌Yapmayın

useEffect dönüşünde script temizlemeyi unutmayın
Aynı para birimi-dil kombinasyonunu bir sayfada iki kez kullanmayın
Scriptleri doğrudan render fonksiyonunda yüklemeyin
Para birimi ve dil değerlerini sabit kodlamayın
Daha iyi sürdürülebilirlik için TypeScript türlerini atlamayın

⚠️ Önemli Notlar

Sayfa başına belirli bir dil ve para birimi kombinasyonuna sahip yalnızca bir widget'a izin verilir. Örneğin, sayfada zaten currency='usd' ve lang='en' olan bir widget varsa, aynı kombinasyona sahip ikinci bir widget çalışmaz.
Birden fazla widget görüntülemek için her widget için farklı currency veya lang propları kullanın.
Script URL parametreleri, bileşene geçtiğiniz proplara göre otomatik olarak oluşturulur.
Next.js 13+ App Router için, istemci tarafı oluşturmayı etkinleştirmek üzere her zaman "use client" yönergesini ekleyin.
Widget, web sitenizin stiline otomatik olarak uyum sağlar ve tamamen duyarlıdır.