Forem: Adamm

Format Indonesian Rupiah Like a Pro with formatRupiah()

Adamm — Thu, 18 Dec 2025 10:11:52 +0000

If you're building apps for the Indonesian market, you've probably struggled with formatting Rupiah currency. Different apps need different formats - some show decimals, some don't, some need the "Rp" symbol, others don't.

I built @indodev/toolkit to solve exactly this problem. Today, I'll show you formatRupiah() - a flexible utility that handles all your Rupiah formatting needs.

Installation

npm install @indodev/toolkit
# or
yarn add @indodev/toolkit
# or
pnpm add @indodev/toolkit

Basic Usage

The simplest use case - just format the number:

import { formatRupiah } from '@indodev/toolkit';

formatRupiah(1500000);
// → 'Rp 1.500.000'

Clean, readable, and follows Indonesian conventions (period as thousand separator).

Real-World Use Cases

1. E-commerce Product Display

Most e-commerce sites don't need decimal places for prices:

const products = [
  { name: 'Laptop ASUS', price: 12500000 },
  { name: 'Mouse Logitech', price: 350000 },
  { name: 'Keyboard Mechanical', price: 1250000 }
];

products.forEach(product => {
  console.log(`${product.name}: ${formatRupiah(product.price)}`);
});

// Output:
// Laptop ASUS: Rp 12.500.000
// Mouse Logitech: Rp 350.000
// Keyboard Mechanical: Rp 1.250.000

2. Payment Gateway Integration

When showing transaction amounts with cents:

const transaction = {
  subtotal: 1500000,
  tax: 150000.50,
  total: 1650000.50
};

console.log('Subtotal:', formatRupiah(transaction.subtotal));
console.log('Tax:', formatRupiah(transaction.tax, { decimal: true }));
console.log('Total:', formatRupiah(transaction.total, { decimal: true }));

// Output:
// Subtotal: Rp 1.500.000
// Tax: Rp 150.000,50
// Total: Rp 1.650.000,50

3. Financial Reports (No Symbol)

For CSV exports or table displays where you don't want the "Rp" symbol:

const revenue = [
  { month: 'January', amount: 45000000 },
  { month: 'February', amount: 52000000 },
  { month: 'March', amount: 48500000 }
];

console.log('Month\t\tRevenue');
revenue.forEach(r => {
  console.log(`${r.month}\t\t${formatRupiah(r.amount, { symbol: false })}`);
});

// Output:
// Month           Revenue
// January         45.000.000
// February        52.000.000
// March           48.500.000

4. International Apps (Custom Separators)

Some apps targeting international users might need comma separators:

const price = 1500000;

// For Indonesian users
console.log(formatRupiah(price));
// → 'Rp 1.500.000'

// For international formatting preference
console.log(formatRupiah(price, { separator: ',' }));
// → 'Rp 1,500,000'

5. Banking Apps (Precision Control)

Control decimal precision for different scenarios:

const balance = 1500000.789;

// Default precision (2 decimal places)
console.log(formatRupiah(balance, { decimal: true }));
// → 'Rp 1.500.000,79'

// High precision for internal calculations
console.log(formatRupiah(balance, { decimal: true, precision: 3 }));
// → 'Rp 1.500.000,789'

// No decimals for display
console.log(formatRupiah(balance));
// → 'Rp 1.500.000'

6. Mobile Apps (Compact Display)

Remove space after symbol for tighter layouts:

const price = 1500000;

// Standard (with space)
console.log(formatRupiah(price));
// → 'Rp 1.500.000'

// Compact (no space)
console.log(formatRupiah(price, { spaceAfterSymbol: false }));
// → 'Rp1.500.000'

7. Handling Negative Values

For refunds, discounts, or debts:

const refund = -250000;
const discount = -50000;

console.log('Refund:', formatRupiah(refund));
console.log('Discount:', formatRupiah(discount));

// Output:
// Refund: -Rp 250.000
// Discount: -Rp 50.000

All Options

Here's the complete API:

interface RupiahOptions {
  symbol?: boolean;              // Show "Rp" symbol (default: true)
  decimal?: boolean;             // Show decimal places (default: false)
  separator?: string;            // Thousands separator (default: '.')
  decimalSeparator?: string;     // Decimal separator (default: ',')
  spaceAfterSymbol?: boolean;    // Space after "Rp" (default: true)
  precision?: number;            // Decimal places (default: 2 if decimal=true)
}

TypeScript Support

Fully typed with IntelliSense support:

import { formatRupiah, type RupiahOptions } from '@indodev/toolkit';

const options: RupiahOptions = {
  decimal: true,
  precision: 2
};

const formatted: string = formatRupiah(1500000, options);

Why Use This?

✅ Zero dependencies - lightweight and fast
✅ Fully tested - 95%+ test coverage
✅ TypeScript native - complete type definitions
✅ Tree-shakeable - only import what you need
✅ Indonesian-first - built by Indonesian developers for Indonesian apps

What's Next?

Check out other utilities in @indodev/toolkit:

formatCompact() - Compact Rupiah format (e.g., "Rp 1,5 juta")
validateNIK() - Validate Indonesian National ID numbers
validatePhoneNumber() - Validate Indonesian phone numbers

Try it now:

npm install @indodev/toolkit

📦 NPM: npmjs.com/package/@indodev/toolkit
📖 Docs: toolkit.adamm.cloud
⭐ GitHub: github.com/choiruladamm/indo-dev-utils

Found this helpful? Give it a star on GitHub! 🌟

Display Rupiah Values Beautifully with formatCompact()

Adamm — Wed, 17 Dec 2025 06:21:53 +0000

Ever noticed how Instagram shows "1.2M likes" instead of "1,200,000 likes"? That's compact formatting - and your Indonesian apps need it too.

Large numbers like Rp 1.500.000.000 take up too much space and are hard to read at a glance. That's why I built formatCompact() in @indodev/toolkit - it formats Rupiah using Indonesian units: ribu, juta, miliar, triliun.

Installation

npm install @indodev/toolkit

Basic Usage

import { formatCompact } from '@indodev/toolkit';

formatCompact(1500000);
// → 'Rp 1,5 juta'

formatCompact(1000000);
// → 'Rp 1 juta'  // Note: proper Indonesian grammar!

Notice how it outputs "1 juta" not "1,0 juta"? That's proper Indonesian grammar built-in.

Real-World Use Cases

1. Dashboard Statistics

Perfect for KPI cards and metrics:

const stats = {
  revenue: 125000000,
  users: 450000,
  transactions: 1500000000
};

console.log(`Revenue: ${formatCompact(stats.revenue)}`);
console.log(`Active Users: ${formatCompact(stats.users)}`);
console.log(`GMV: ${formatCompact(stats.transactions)}`);

// Output:
// Revenue: Rp 125 juta
// Active Users: Rp 450 ribu
// GMV: Rp 1,5 miliar

Much cleaner than "Rp 125.000.000", right?

2. Social Media Posts

Show funding announcements or milestones:

const announcements = [
  { company: 'Tokopedia', funding: 1500000000000 },
  { company: 'Gojek', funding: 3000000000000 },
  { company: 'Bukalapak', funding: 850000000000 }
];

announcements.forEach(a => {
  console.log(`${a.company} raised ${formatCompact(a.funding)}! 🚀`);
});

// Output:
// Tokopedia raised Rp 1,5 triliun! 🚀
// Gojek raised Rp 3 triliun! 🚀
// Bukalapak raised Rp 850 miliar! 🚀

3. E-commerce Product Listings

When space is limited (mobile cards, grids):

const products = [
  { name: 'iPhone 15 Pro', price: 18000000 },
  { name: 'MacBook Air M2', price: 16500000 },
  { name: 'AirPods Pro', price: 3500000 }
];

// Mobile card view
products.forEach(p => {
  console.log(`${p.name}\n${formatCompact(p.price)}\n`);
});

// Output:
// iPhone 15 Pro
// Rp 18 juta
//
// MacBook Air M2
// Rp 16,5 juta
//
// AirPods Pro
// Rp 3,5 juta

4. Real Estate Listings

Property prices with clean display:

const properties = [
  { type: 'Apartment', price: 850000000 },
  { type: 'House', price: 2500000000 },
  { type: 'Villa', price: 5200000000 }
];

properties.forEach(p => {
  console.log(`${p.type}: ${formatCompact(p.price)}`);
});

// Output:
// Apartment: Rp 850 juta
// House: Rp 2,5 miliar
// Villa: Rp 5,2 miliar

5. Chart Labels

Keep your charts readable:

const monthlyRevenue = [
  { month: 'Jan', revenue: 450000000 },
  { month: 'Feb', revenue: 520000000 },
  { month: 'Mar', revenue: 680000000 },
  { month: 'Apr', revenue: 1200000000 }
];

// For chart Y-axis labels
const chartData = monthlyRevenue.map(data => ({
  x: data.month,
  y: data.revenue,
  label: formatCompact(data.revenue)
}));

console.log(chartData);

// Output:
// [
//   { x: 'Jan', y: 450000000, label: 'Rp 450 juta' },
//   { x: 'Feb', y: 520000000, label: 'Rp 520 juta' },
//   { x: 'Mar', y: 680000000, label: 'Rp 680 juta' },
//   { x: 'Apr', y: 1200000000, label: 'Rp 1,2 miliar' }
// ]

6. Financial News App

Display market cap, volume, etc:

const stockInfo = {
  company: 'Bank BCA',
  marketCap: 985000000000000,
  volume: 125000000000
};

console.log(`${stockInfo.company}`);
console.log(`Market Cap: ${formatCompact(stockInfo.marketCap)}`);
console.log(`Volume: ${formatCompact(stockInfo.volume)}`);

// Output:
// Bank BCA
// Market Cap: Rp 985 triliun
// Volume: Rp 125 miliar

7. Startup Pitch Decks

Show traction metrics cleanly:

const metrics = {
  arr: 12000000000,        // Annual Recurring Revenue
  mrr: 1000000000,         // Monthly Recurring Revenue
  runway: 24000000000      // Cash runway
};

console.log('📊 Key Metrics');
console.log(`ARR: ${formatCompact(metrics.arr)}`);
console.log(`MRR: ${formatCompact(metrics.mrr)}`);
console.log(`Runway: ${formatCompact(metrics.runway)}`);

// Output:
// 📊 Key Metrics
// ARR: Rp 12 miliar
// MRR: Rp 1 miliar
// Runway: Rp 24 miliar

8. Handling Edge Cases

The function smartly handles different ranges:

// Trillions
formatCompact(1500000000000);  // → 'Rp 1,5 triliun'

// Billions
formatCompact(2500000000);     // → 'Rp 2,5 miliar'

// Millions
formatCompact(3500000);        // → 'Rp 3,5 juta'

// Hundreds of thousands (uses 'ribu')
formatCompact(500000);         // → 'Rp 500 ribu'

// Below 100k (standard format, not compact)
formatCompact(85000);          // → 'Rp 85.000'
formatCompact(1500);           // → 'Rp 1.500'

// Negative values
formatCompact(-1500000);       // → '-Rp 1,5 juta'

When to Use formatCompact vs formatRupiah

Use formatCompact() when:

Space is limited (mobile cards, tooltips)
Quick scanning is important (dashboards, charts)
Exact values don't matter (social media, announcements)

Use formatRupiah() when:

Exact amounts matter (invoices, receipts)
Official documents (contracts, reports)
Payment screens (checkout, transfers)

Example: Hybrid Approach

import { formatCompact, formatRupiah } from '@indodev/toolkit';

// Product card (compact)
const cardPrice = formatCompact(15000000);  // 'Rp 15 juta'

// Checkout page (exact)
const checkoutPrice = formatRupiah(15000000);  // 'Rp 15.000.000'

// Tooltip (both!)
const tooltip = `${cardPrice} (${formatRupiah(15000000, { symbol: false })})`;
// 'Rp 15 juta (15.000.000)'

Indonesian Grammar Rules Built-In

The function follows proper Indonesian grammar:

✅ "1 juta" not "1,0 juta"
✅ "1,5 juta" for 1.5 million
✅ Uses comma (,) for decimals
✅ Automatically rounds to 1 decimal place

TypeScript Support

import { formatCompact } from '@indodev/toolkit';

// Fully typed
const formatted: string = formatCompact(1500000);

// Works with computed values
const total = prices.reduce((sum, p) => sum + p, 0);
const display = formatCompact(total);

Why Use This?

✅ Zero dependencies - just 30KB total
✅ Proper Indonesian - follows local grammar rules
✅ Smart rounding - removes unnecessary decimals
✅ Wide range support - from thousands to trillions
✅ Battle-tested - 95%+ test coverage

What's Next?

Explore other utilities in @indodev/toolkit:

formatRupiah() - Full Rupiah formatting with options
validateNIK() - Validate Indonesian National ID
validatePhoneNumber() - Phone number validation

Get started:

npm install @indodev/toolkit

📦 NPM: npmjs.com/package/@indodev/toolkit
📖 Docs: toolkit.adamm.cloud
⭐ GitHub: github.com/choiruladamm/indo-dev-utils

Make your UI cleaner today! 🚀

Stop Writing Regex for Indonesian IDs, Phones & Currency

Adamm — Mon, 15 Dec 2025 07:27:50 +0000

Building apps for the Indonesian market? You've probably wasted hours writing regex for NIK validation, phone number formatting, and Rupiah display.

Meet @indodev/toolkit – TypeScript utilities that actually get Indonesian data right.

// Validate NIK and extract data
validateNIK('3201234567890123') // true
parseNIK('3201234567890123') // {province: 'Jawa Barat', ... }

// Format phone numbers automatically  
formatPhoneNumber('081234567890', 'international') 
// '+62 812-3456-7890'

// Rupiah formatting + words for invoices
formatRupiah(1500000) // 'Rp 1.500.000'
toWords(1500000) // 'satu juta lima ratus ribu'

Why use it?

Zero dependencies – fast & secure
Tree-shakeable (~10KB per module)
470+ battle-tested test cases
Operator detection (Telkomsel, XL, etc.)

Perfect for fintech, e-commerce, HR systems, or any app handling Indonesian citizen data.

Check out the full API and examples:
https://toolkit.adamm.cloud/docs

Stop reinventing the wheel. Start shipping faster.

How to use geolocation api using ReactJS

Adamm — Mon, 11 Sep 2023 03:04:49 +0000

Geolocation is used to find the current location of a network device. It can be used in applications like Google Maps, Uber, Tripadvisor, etc.

In ReactJS, we can find a user's current geolocation using the JavaScript Geolocation API.

Note: The Geolocation API is supported in a handful of broswers which can run HTML 5 such as Google Chrome, Opera, Edge, etc.

Now we will look at the steps that we need to follow in order to use the Geolocation API and find a user's latitude and longitude coordinates.

First, we will need to import react and the required libraries that will be used in this implementation. We will use the useState react hook to manage the variable which stores a user's geolocation. We shall add the following line to include these libraries and methods at the start of our program.

import React, { useState } from 'react';

We will declare a component function called App() for our React project, which will load the application page. There we will enclose all the geolocation methods.
We will declare a component function called App() for our React project, which will load the application page. There we will enclose all the geolocation methods.

const [userLocation, setUserLocation] = useState(null);

The next step is to define a function to find the user's geolocation and update the userLocation variable accordingly. We will use the arrow function shown below.

const getUserLocation = () => { /*insert code here*/ };

In this getUserLocation function, we will now add all the methods for finding the user's geolocation. First, we will check whether the geolocation functionality is supported by the user's browser. We will use a simple if else statement encasing the navigator.geolocation function.

if (navigator.geolocation) {
    // what to do if supported
}
else {
    // display an error if not supported
    console.error('Geolocation is not supported by this browser.');
}

Now, we need to work on what to do if the navigator.geolocation method is supported by the user's browser. We will need to retrieve the user's location. To do this, we use the navigator.geolocation.getCurrentPosition() function.

navigator.geolocation.getCurrentPosition(
    (position) => {
        // what to do once we have the position
    },
    (error) => {
        // display an error if we cant get the users position
        console.error('Error getting user location:', error);
    }
);

Once we have the position of the user, we can now use it to find the user's coordinates and other relevant data. To access the coordinates that are enclosed in the position variable, we can use the poisiton.coords method. We will now create two variables to store these coordinates for later use.

const { latitude, longitude } = position.coords;

Once we have access to the user's coordinates, we will now update our userLocation variable by calling the setUserLocation() function.

setUserLocation({ latitude, longitude });

Now that we have stored the user's location coordinates, our next job is to render an HTML that will reflect back the user's coordinates onto the web page. To do this, we will include a button, and when its clicked, we will call the getUserLocation function and update the userLocation variable.

<button onClick={getUserLocation}>Get User Location</button>

We must also display the user location if we retrieve it successfully. To do this, we will use a && statement along with the userLocation variable, which encloses all the HTML code to print the user's coordinates. Once the userLocation variable updates, it is no longer a null value, and the statement is now true; hence it displays the coordinates.

{userLocation && (
    <div>
        <h2>User Location</h2>
        <p>Latitude: {userLocation.latitude}</p>
        <p>Longitude: {userLocation.longitude}</p>
    </div>
)}

Now that we have gone through all the steps that we need to follow to retrieve a user's geographical location, we will now combine all the steps into a single file.

Full Source code

// import the required react libraries
import React, { useState } from 'react';

function App() {
  // const variable array to save the users location
  const [userLocation, setUserLocation] = useState(null);

  // define the function that finds the users geolocation
  const getUserLocation = () => {
    // if geolocation is supported by the users browser
    if (navigator.geolocation) {
      // get the current users location
      navigator.geolocation.getCurrentPosition(
        (position) => {
          // save the geolocation coordinates in two variables
          const { latitude, longitude } = position.coords;
          // update the value of userlocation variable
          setUserLocation({ latitude, longitude });
        },
        // if there was an error getting the users location
        (error) => {
          console.error('Error getting user location:', error);
        }
      );
    }
    // if geolocation is not supported by the users browser
    else {
      console.error('Geolocation is not supported by this browser.');
    }
  };

  // return an HTML page for the user to check their location
  return (
    <div>
      <h1>Geolocation App</h1>
      {/* create a button that is mapped to the function which retrieves the users location */}
      <button onClick={getUserLocation}>Get User Location</button>
      {/* if the user location variable has a value, print the users location */}
      {userLocation && (
        <div>
          <h2>User Location</h2>
          <p>Latitude: {userLocation.latitude}</p>
          <p>Longitude: {userLocation.longitude}</p>
        </div>
      )}
    </div>
  );
}

export default App;

If you want using typescript, source code here

"use client"

import React, { useState } from "react";

export default function TestGeolocation() {
  const [userLocation, setUserLocation] = useState<{
    latitude: number;
    longitude: number;
  } | null>(null);

  const getUserLocation = () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const { latitude, longitude } = position.coords;

          setUserLocation({ latitude, longitude });
        },

        (error) => {
          console.error("Error get user location: ", error);
        }
      );
    } else {
      console.log("Geolocation is not supported by this browser");
    } 
  };

  return (
    <>
      <h1>Geolocation App</h1>
      {/* create a button that is mapped to the function which retrieves the users location */}
      <button onClick={getUserLocation}>Get User Location</button>
      {/* if the user location variable has a value, print the users location */}
      {userLocation && (
        <div>
          <h2>User Location</h2>
          <p>Latitude: {userLocation.latitude}</p>
          <p>Longitude: {userLocation.longitude}</p>
        </div>
      )}
    </>
  );
}