be-intl (๐ŸŒ)

January 6, 2025 ยท View on GitHub

Format numbers, dates automatically and semantically.

Playwright Tests How big is this package in your project? NPM version

<data value=123456.789 lang="de-DE" be-intl='{ "style": "currency", "currency": "EUR" }'></data>

emits

<data value=123456.789 lang="de-DE" be-intl='{ "style": "currency", "currency": "EUR" }'>123.456,79 โ‚ฌ</data>

The output element provides identical support.

<time lang="ar-EG" datetime=2011-11-18T14:54:39.929Z be-intl='{ "weekday": "long", "year": "numeric", "month": "long", "day": "numeric" }'></time>

emits

<time lang="ar-EG" datetime="2011-11-18T14:54:39.929Z" be-intl="{ &quot;weekday&quot;: &quot;long&quot;, &quot;year&quot;: &quot;numeric&quot;, &quot;month&quot;: &quot;long&quot;, &quot;day&quot;: &quot;numeric&quot; }">ุงู„ุฌู…ุนุฉุŒ ูกูจ ู†ูˆูู…ุจุฑ ูขู ูกูก</time>

We can also employ more semantic syntax:

<data value=123456.789 lang="de-DE" be-intl-style=currency be-intl-currency=EUR></data>

Alternative names

The semantic example above involves a lot of keyboard tapping of the letters "be-intl". To avoid blisters on your itty bitty fingers, we provide an alternative base attribute you can use:

<time lang="ar-EG" datetime="2011-11-18T14:54:39.929Z"
๐ŸŒ-weekday=long ๐ŸŒ-year=numeric ๐ŸŒ-month=long ๐ŸŒ-day=numeric></time>

Viewing Locally

Any web server than can serve static files will do, but...

  1. Install git.
  2. Fork/clone this repo.
  3. Install node.
  4. Open command window to folder where you cloned this repo.
  5. npm install

  6. npm run serve

  7. Open http://localhost:8000/demo in a modern browser.

Importing in ES Modules:

import 'be-intl/be-intl.js';

Using from CDN:

<script type=module crossorigin=anonymous>
    import 'https://esm.run/be-intl';
</script>