import { BanglaNumberConverter } from 'react-bangla-number-converter';

function App() {
  return (
    <div>
      <BanglaNumberConverter value={12345} />
      {/* Output: বারো হাজার তিন শত পঁয়তাল্লিশ */}
    </div>
  );
}

import { useBanglaNumberConverter } from 'react-bangla-number-converter';

function MyComponent() {
  const { banglaText, convert } = useBanglaNumberConverter(12345);
  
  return (
    <div>
      <p>Number: 12345</p>
      <p>Bangla: {banglaText}</p>
      {/* banglaText: "বারো হাজার তিন শত পঁয়তাল্লিশ" */}
    </div>
  );
}

import { numberToBanglaWords } from 'react-bangla-number-converter';

const result = numberToBanglaWords(12345);
console.log(result); // "বারো হাজার তিন শত পঁয়তাল্লিশ"

numberToBanglaWords(12345);
// Returns: "বারো হাজার তিন শত পঁয়তাল্লিশ"

numberToBanglaWords(12345, { includeSpaces: false });
// Returns: "বারোহাজারতিনশতপঁয়তাল্লিশ"

interface BanglaNumberConverterProps {
  value: number | string;           // The number to convert
  options?: ConverterOptions;       // Configuration options
  className?: string;               // Custom CSS class
  style?: React.CSSProperties;      // Custom inline styles
  onConvert?: (result: string) => void; // Callback when conversion completes
}

<BanglaNumberConverter 
  value={12345}
  options={{ includeSpaces: true }}
  className="my-bangla-text"
  onConvert={(result) => console.log(result)}
/>

interface BanglaNumberInputProps {
  defaultValue?: number | string;   // Initial value
  placeholder?: string;             // Placeholder text
  options?: ConverterOptions;       // Configuration options
  className?: string;               // Custom CSS class
  style?: React.CSSProperties;      // Custom inline styles
  onChange?: (value: string, banglaText: string) => void; // Change callback
  showConvertedText?: boolean;      // Whether to show converted text
  disabled?: boolean;               // Whether input is disabled
}

<BanglaNumberInput
  defaultValue={12345}
  placeholder="Enter a number..."
  showConvertedText={true}
  onChange={(value, banglaText) => {
    console.log('Input:', value);
    console.log('Bangla:', banglaText);
  }}
/>

interface UseBanglaNumberConverterReturn {
  banglaText: string;               // The converted Bangla text
  isLoading: boolean;               // Whether conversion is in progress
  error: string | null;             // Any error that occurred
  convert: (value: number | string) => void; // Function to trigger conversion
}

const { banglaText, isLoading, error, convert } = useBanglaNumberConverter(12345);

// Convert a new number
convert(67890);

interface ConverterOptions {
  includeSpaces?: boolean;          // Include spaces between words (default: true)
  supportBanglaDigits?: boolean;    // Support Bangla digits (০-৯) in input (default: false)
  outputBanglaDigits?: boolean;     // Output Bangla digits instead of words (default: false)
  separator?: string;               // Custom separator between words (default: ' ')
}

// Without spaces
numberToBanglaWords(12345, { includeSpaces: false });
// Returns: "বারোহাজারতিনশতপঁয়তাল্লিশ"

// Custom separator
numberToBanglaWords(12345, { separator: '-' });
// Returns: "বারো-হাজার-তিন-শত-পঁয়তাল্লিশ"

// Support Bangla digits in input
numberToBanglaWords('১২৩৪৫', { supportBanglaDigits: true });
// Returns: "বারো হাজার তিন শত পঁয়তাল্লিশ"

import { BanglaNumberConverter } from 'react-bangla-number-converter';

function InvoiceAmount({ amount }: { amount: number }) {
  return (
    <div className="invoice-amount">
      <h3>Amount: ₹{amount.toLocaleString()}</h3>
      <p className="bangla-amount">
        <BanglaNumberConverter value={amount} />
      </p>
    </div>
  );
}

// Usage
<InvoiceAmount amount={1234567} />
// Displays: Amount: ₹12,34,567
//           বারো লাখ চৌত্রিশ হাজার পাঁচ শত সাতষট্টি

import { BanglaNumberInput } from 'react-bangla-number-converter';

function NumberLearningApp() {
  return (
    <div className="learning-app">
      <h2>Learn Numbers in Bangla</h2>
      <BanglaNumberInput
        placeholder="Type any number to learn its Bangla name..."
        showConvertedText={true}
        options={{ includeSpaces: true }}
      />
    </div>
  );
}

import { BanglaNumberConverter } from 'react-bangla-number-converter';

function StyledConverter({ value }: { value: number }) {
  return (
    <BanglaNumberConverter
      value={value}
      className="custom-bangla-text"
      style={{
        fontSize: '24px',
        color: '#2d3748',
        fontFamily: 'Noto Sans Bengali, Arial Unicode MS, sans-serif',
        fontWeight: 'bold',
        textAlign: 'center',
        padding: '20px',
        backgroundColor: '#f7fafc',
        borderRadius: '8px',
        border: '2px solid #e2e8f0'
      }}
    />
  );
}

import { useState } from 'react';
import { BanglaNumberInput } from 'react-bangla-number-converter';

function PaymentForm() {
  const [amount, setAmount] = useState('');
  const [banglaAmount, setBanglaAmount] = useState('');

  const handleAmountChange = (value: string, banglaText: string) => {
    setAmount(value);
    setBanglaAmount(banglaText);
  };

  return (
    <form>
      <div className="form-group">
        <label htmlFor="amount">Payment Amount</label>
        <BanglaNumberInput
          id="amount"
          defaultValue={amount}
          placeholder="Enter amount..."
          onChange={handleAmountChange}
          showConvertedText={true}
        />
      </div>
      
      {banglaAmount && (
        <div className="bangla-display">
          <strong>Amount in Bangla:</strong> {banglaAmount}
        </div>
      )}
    </form>
  );
}

import { BanglaNumberConverter } from 'react-bangla-number-converter';

function MultiLanguageInvoice({ amount, language }: { amount: number; language: string }) {
  return (
    <div className="invoice">
      <h3>Invoice Amount</h3>
      <p className="amount-numeric">₹{amount.toLocaleString()}</p>
      
      {language === 'bn' && (
        <p className="amount-bangla">
          <BanglaNumberConverter value={amount} />
        </p>
      )}
    </div>
  );
}