⚛️ ادغام React.js و Next.js

ویجت ماشین‌حساب نرخ ارز ریال ایران برای اپلیکیشن‌های React

راهنمای شروع سریع

کامپوننت React زیر را کپی کنید و شروع به نمایش نرخ‌های ارز ریال ایران لحظه‌ای در اپلیکیشن React یا Next.js خود کنید!

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.

🎮INTERACTIVE DEMO CONFIGURATOR

Customize & Preview Live

Choose your preferred currency and language to see the widget in action. Copy the integration code for your setup.

💰 Select Currency

🌍 Select Language

Live

USD

→

فارسی

Live Widget Demo

📋 Integration Code

React.js Component Usagejavascript

import PashiziWidget from './PashiziWidget';

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

export default MyComponent;

💡 Make sure you have the PashiziWidget component created in your project.

Show PashiziWidget Component Code

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;

📝 نمونه‌های استفاده

۱. ویجت پایه USD

ویجت ساده نرخ ارز دلار آمریکا با رابط انگلیسی

Usage:

tsx

<PashiziWidget />

۲. EUR به آلمانی

نرخ‌های ارز یورو با رابط آلمانی

Usage:

tsx

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

۳. USD به فارسی

نرخ‌های دلار آمریکا با رابط فارسی

Usage:

tsx

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

۴. CHF با استایل سفارشی

ویجت فرانک سوئیس با کلاس CSS سفارشی برای استایل‌دهی

Usage:

tsx

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

▲ پیکربندی خاص Next.js

📁App Router (Next.js 13+)

دستورالعمل "use client" را در بالای کامپوننت خود برای رندر کردن سمت کلاینت اضافه کنید:

tsx

"use client";

import { useEffect } from "react";

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

🏗️Pages Router (Next.js 12 و پایین‌تر)

از dynamic imports استفاده کنید تا اطمینان حاصل کنید کامپوننت فقط روی کلاینت اجرا می‌شود:

tsx

import dynamic from 'next/dynamic';

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

⚙️ پیکربندی پیشرفته

Props کامپوننت

Prop	نوع	توضیحات	مثال
currency	string	کد ارز پایه (۳ حرف)	"usd"
lang	string	زبان رابط (۲ حرف)	"en"
className	string?	کلاس‌های CSS اختیاری	"my-widget"

رابط TypeScript

رابط‌های TypeScript مناسب برای ایمنی نوع بهتر تعریف کنید:

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

💰 ارزهای پشتیبانی شده (۲۸+)

از این کدهای ارز در prop 'currency' استفاده کنید. همه نرخ‌ها در برابر ریال ایران (IRR) نمایش داده می‌شوند.

💡 نمونه استفاده

<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

🌍 زبان‌های پشتیبانی شده (۱۰)

از این کدهای زبان در prop 'lang' برای نمایش رابط ویجت به زبان‌های مختلف استفاده کنید.

💡 نمونه انتخاب زبان

<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

✅ بهترین شیوه‌ها

✅انجام دهید

از useEffect برای بارگذاری اسکریپت و تمیزکاری استفاده کنید
آرایه وابستگی [currency, lang] را به useEffect اضافه کنید
از دستورالعمل "use client" برای Next.js App Router استفاده کنید
رابط‌های TypeScript مناسب تعریف کنید
روی اندازه‌های مختلف صفحه تست کنید

❌انجام ندهید

تمیزکاری اسکریپت در بازگشت useEffect را فراموش نکنید
دو بار از ترکیب یکسان ارز-زبان در یک صفحه استفاده نکنید
اسکریپت‌ها را مستقیماً در تابع render بارگذاری نکنید
مقادیر ارز و زبان را hard-code نکنید
برای بهبود قابلیت نگهداری، از انواع TypeScript صرف‌نظر نکنید

⚠️ نکات مهم

فقط یک ویجت با ترکیب خاص زبان و ارز در هر صفحه مجاز است. به عنوان مثال، اگر در صفحه قبلاً ویجتی با currency='usd' و lang='en' وجود داشته باشد، ویجت دوم با همان ترکیب کار نخواهد کرد.
برای نمایش چندین ویجت، از props مختلف currency یا lang برای هر ویجت استفاده کنید.
پارامترهای URL اسکریپت به‌طور خودکار براساس props که به کامپوننت ارسال می‌کنید تولید می‌شوند.
برای Next.js 13+ App Router، همیشه دستورالعمل "use client" را برای فعال کردن رندر سمت کلاینت اضافه کنید.
ویجت به‌طور خودکار با استایل وب‌سایت شما تطبیق می‌یابد و کاملاً پاسخگو است.