aed-dirham-symbol

v1.2.0

Published

6 months ago

UAE Dirham currency symbol package for web applications - provides SVG, CSS, and JavaScript implementations with Next.js support

0High
0Medium
0Low

nafseerck

dirham currency symbol uae emirates aed svg css javascript web frontend nextjs react typescript

Dirham Symbol Package 🇦🇪

A comprehensive npm package providing the UAE Dirham (AED) currency symbol for web applications. Includes SVG, CSS, and JavaScript implementations for easy integration.

Installation

npm install aed-dirham-symbol

Usage

1. CSS Implementation (Recommended)

Import the CSS file and use the class:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="node_modules/dirham-symbol/dirham.css">
</head>
<body>
    Cost <span class="dirham-symbol"></span>12345
</body>
</html>

Or import in your CSS:

@import 'dirham-symbol/dirham.css';

.price::before {
    content: '';
    display: inline-block;
    background-image: url('dirham-symbol/dirham.svg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 0.7em;
    height: 0.7em;
    margin-right: 0.1em;
}

2. JavaScript/React Implementation

import { getDirhamSymbol, DirhamSymbol } from 'dirham-symbol';

// Get SVG as string
const svgString = getDirhamSymbol();
document.getElementById('price').innerHTML = `Cost ${svgString}12345`;

// React component
function Price({ amount }) {
    return (
        <div>
            Cost <DirhamSymbol /> {amount}
        </div>
    );
}

3. Direct SVG Usage

<img src="node_modules/dirham-symbol/dirham.svg" alt="Dirham" style="height: 0.7em; width: auto;">

4. Vue.js Implementation

<template>
  <div>
    Cost <span v-html="dirhamSymbol"></span>{{ amount }}
  </div>
</template>

<script>
import { getDirhamSymbol } from 'dirham-symbol';

export default {
  data() {
    return {
      amount: 12345,
      dirhamSymbol: getDirhamSymbol()
    }
  }
}
</script>

5. Next.js Implementation

App Router (Next.js 13+)

// app/components/PriceDisplay.tsx
'use client';
import { getDirhamSymbol } from 'aed-dirham-symbol';
import 'aed-dirham-symbol/dirham.css';

export default function PriceDisplay({ amount }: { amount: number }) {
  return (
    <div className="price-display">
      Cost <span 
        className="dirham-symbol" 
        dangerouslySetInnerHTML={{ __html: getDirhamSymbol() }}
      /> {amount.toLocaleString()}
    </div>
  );
}

// Usage in app/page.tsx
import PriceDisplay from './components/PriceDisplay';

export default function Home() {
  return (
    <main>
      <PriceDisplay amount={12345} />
    </main>
  );
}

Pages Router (Next.js 12 and below)

// pages/index.tsx
import { getDirhamSymbol } from 'aed-dirham-symbol';
import 'aed-dirham-symbol/dirham.css';

export default function Home() {
  return (
    <div>
      <h1>Price List</h1>
      <p>Cost <span dangerouslySetInnerHTML={{ __html: getDirhamSymbol() }} /> 12,345</p>
    </div>
  );
}

CSS Import in Next.js

// pages/_app.tsx or app/layout.tsx
import 'aed-dirham-symbol/dirham.css';

// Then use the CSS class anywhere
<span>Cost <span className="dirham-symbol"></span> 12,345</span>

Custom Hook for Next.js

// hooks/useDirhamSymbol.ts
import { useEffect, useState } from 'react';
import { getDirhamSymbol } from 'aed-dirham-symbol';

export const useDirhamSymbol = () => {
  const [symbol, setSymbol] = useState('');

  useEffect(() => {
    setSymbol(getDirhamSymbol());
  }, []);

  return symbol;
};

// Usage
export default function PriceComponent({ amount }: { amount: number }) {
  const dirhamSymbol = useDirhamSymbol();
  
  return (
    <span>
      Cost <span dangerouslySetInnerHTML={{ __html: dirhamSymbol }} /> {amount}
    </span>
  );
}

Server-Side Rendering (SSR) Safe

// components/DirhamPrice.tsx
import dynamic from 'next/dynamic';

const DirhamSymbol = dynamic(
  () => import('aed-dirham-symbol').then(mod => {
    return function DirhamSymbolComponent() {
      return <span dangerouslySetInnerHTML={{ __html: mod.getDirhamSymbol() }} />;
    };
  }),
  { ssr: false }
);

export default function DirhamPrice({ amount }: { amount: number }) {
  return (
    <div>
      Cost <DirhamSymbol /> {amount}
    </div>
  );
}

6. Angular Implementation

import { Component } from '@angular/core';
import { getDirhamSymbol } from 'aed-dirham-symbol';

@Component({
  selector: 'app-price',
  template: `Cost <span [innerHTML]="dirhamSymbol"></span>{{ amount }}`
})
export class PriceComponent {
  amount = 12345;
  dirhamSymbol = getDirhamSymbol();
}

Features

✅ Lightweight and fast
✅ Multiple implementation methods
✅ Framework agnostic
✅ TypeScript support
✅ Responsive design friendly
✅ High-quality SVG symbol
✅ CSS-only solution available
✅ No external dependencies

API Reference

`getDirhamSymbol()`

Returns the Dirham symbol as an SVG string.

Returns: string - SVG markup for the Dirham symbol

`DirhamSymbol` (React Component)

A React component that renders the Dirham symbol.

Props: None

Styling

The symbol can be styled like any other inline element:

.dirham-symbol {
    color: #007bff;
    font-size: 1.2em;
    vertical-align: baseline;
}

Browser Support

✅ Chrome (all versions)
✅ Firefox (all versions)
✅ Safari (all versions)
✅ Edge (all versions)
✅ Internet Explorer 11+

Contributing

Fork the repository
Create a feature branch
Make your changes
Add tests if applicable
Submit a pull request

License

MIT License - see LICENSE file for details.

Changelog

v1.0.0

Initial release
SVG, CSS, and JavaScript implementations
TypeScript support
Framework examples

Support

If you find this package useful, please consider:

⭐ Starring the repository
🐛 Reporting bugs
💡 Suggesting new features
🤝 Contributing to the code

Made with ❤️ for the UAE developer community