⃁ Riyal

Guide · 4 min read · Updated 2026-05-08

How to display the Saudi Riyal symbol (U+20C1) in React

Drop the official SAMA Saudi Riyal sign into any React app with riyal/react. Install once, import RiyalPrice or RiyalSymbol, render anywhere — no font setup, SSR-safe, with an optional masked input that handles SAR / ⃁ / Arabic-numeral paste.

The Saudi Riyal got an official Unicode codepoint, U+20C1, in Unicode 17.0 (September 2025). Most operating-system fonts haven’t shipped the new glyph yet, so showing it in a React app means either embedding the font or rendering inline SVG. The riyal package does both for you.

Install

npm install riyal
# or
pnpm add riyal
yarn add riyal
bun add riyal

react ≥ 18 is the only peer dependency for riyal/react; everything else is optional.

Render the symbol

import { RiyalSymbol, RiyalIcon } from "riyal/react";

<RiyalSymbol size={24} />
<RiyalIcon width={32} height={32} />

Both render the SAMA glyph as inline SVG, so they work in Server Components and before any web font has loaded — no “tofu” (rectangular fallback boxes) ever.

Format a price

import { RiyalPrice } from "riyal/react";

<RiyalPrice amount={2499.99} />            // ⃁ 2,499.99
<RiyalPrice amount={2499.99} locale="ar-SA" /> // ⃁ ٢٬٤٩٩٫٩٩
<RiyalPrice amount={1500000} notation="compact" /> // ⃁ 1.5M

RiyalPrice wraps Intl.NumberFormat, so it speaks every BCP-47 locale and respects RTL placement automatically.

Masked currency input

Form inputs are where most React-and-SAR projects bog down. riyal/react ships a controlled <RiyalInput> with an opt-in mask prop that delivers format-as-you-type editing, paste cleanup, Arabic-numeral normalisation, and caret preservation:

import { useState } from "react";
import { RiyalInput } from "riyal/react";

function PriceField() {
  const [value, setValue] = useState<number | "">(0);
  return <RiyalInput mask value={value} onValueChange={setValue} />;
}

Pasting "SAR 2,499.99", "⃁ 2,499.99", or "٢٤٩٩٫٩٩" all yield 2499.99 with a 2,499.99 display. That’s the input behaviour that drives react-number-format’s ~2.4M weekly downloads — without bringing in a 100 kB dependency.

Saudi VAT & conversion

import { addVAT, removeVAT, getVAT, convertFromSAR } from "riyal";

addVAT(1000);              // 1150  (15% Saudi VAT)
removeVAT(1150);           // 1000
await convertFromSAR(1000, "USD");  // SAR → USD via cached rates

Next steps

Built by Pooya Golchian · riyal on npm · live demo