⚛️ React.js & Next.js Integration

Iranian Rial Exchange Rate Calculator Widget for React Applications

Quick Start Guide

Copy the React component below and start displaying real-time Iranian Rial exchange rates in your React or Next.js application!

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

return 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

→

English

Live Widget Demo

📋 Integration Code

React.js Component Usagejavascript

import PashiziWidget from './PashiziWidget';

function MyComponent() {
  return (
    <div>
      <PashiziWidget currency="usd" lang="en" />
    </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;

📝 Usage Examples

1. Basic USD Widget

Simple USD exchange rate widget with English interface

Usage:

tsx

<PashiziWidget />

2. EUR in German

Euro exchange rates with German interface

Usage:

tsx

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

3. USD in Persian

US Dollar rates with Persian (Farsi) interface

Usage:

tsx

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

4. CHF with Custom Styling

Swiss Franc widget with custom CSS class for styling

Usage:

tsx

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

▲ Next.js Specific Configuration

📁App Router (Next.js 13+)

Add "use client" directive at the top of your component for client-side rendering:

tsx

"use client";

import { useEffect } from "react";

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

🏗️Pages Router (Next.js 12 and below)

Use dynamic imports to ensure the component only runs on the client:

tsx

import dynamic from 'next/dynamic';

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

⚙️ Advanced Configuration

Component Props

Prop	Type	Description	Example
currency	string	Base currency code (3 letters)	"usd"
lang	string	Interface language (2 letters)	"en"
className	string?	Optional CSS classes	"my-widget"

TypeScript Interface

Define proper TypeScript interfaces for better type safety:

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

💰 Supported Currencies (28+)

Use these currency codes in the 'currency' prop. All rates are displayed against Iranian Rial (IRR).

💡 Usage Example

<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

🌍 Supported Languages (10)

Use these language codes in the 'lang' prop to display the widget interface in different languages.

💡 Language Selection Example

<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

✅ Best Practices

✅Do

Use useEffect for script loading and cleanup
Add dependency array [currency, lang] to useEffect
Use "use client" directive for Next.js App Router
Define proper TypeScript interfaces
Test on different screen sizes

❌Don't

Don't forget script cleanup in useEffect return
Don't use same currency-language combination twice on one page
Don't load scripts directly in render function
Don't hard-code currency and language values
Don't skip TypeScript types for better maintainability

⚠️ Important Notes

Only one widget with a specific language and currency combination is allowed per page. For example, if there is already a widget with currency='usd' and lang='en' on the page, a second widget with the same combination will not work.
To display multiple widgets, use different currency or lang props for each widget.
The script URL parameters are automatically generated based on the props you pass to the component.
For Next.js 13+ App Router, always add "use client" directive to enable client-side rendering.
The widget automatically adapts to your website's styling and is fully responsive.