Getting started

Receive active-format in your repository, declare it, and make the first call.

@workspace/active-format 1.0.0Developmentunreleased, in development in Foundationbaseline ce081dc3

These steps were carried out in a new, empty repository with a React app on Vite, through the managed transfer, without any path to Foundation or to the source repository.

1. Prepare your repository#

   A pnpm workspace with packages/*, Node.js 26, and byte-exact checkouts for transferred packages:

   yaml

   # pnpm-workspace.yamlpackages:  - packages/*  - apps/*

   Text

   # .gitattributespackages/** -text

2. Receive the package#

   active-format can be requested on its own: it depends on no other workspace package. Ask the source repository for a bundle of active-format (on the development channel while it is unreleased), then follow Receiving packages:

   Terminal

   node tools/rps/rps-apply.mjs plan --bundle <bundle-folder> --developmentnode tools/rps/rps-apply.mjs apply --bundle <bundle-folder> --expect-plan <digest> --development

   The package now sits in packages/active-format. Do not edit it there.

3. Declare, install and verify#

   In the package.json of the app that uses it:

   JSON

   {  "dependencies": {    "@workspace/active-format": "workspace:*"  }}

   Terminal

   pnpm install

   Then prove that your app resolves the managed copy:

   Terminal

   node tools/rps/rps-apply.mjs verify-install --from <app-folder>

   The output must list @workspace/active-format as current. If it lists no package, nothing was checked: the declaration or the installation is missing.

   The package ships TypeScript source. Vite compiles it as it is. In a Next.js app, add it to transpilePackages in next.config:

   JavaScript

   const nextConfig = {  transpilePackages: ['@workspace/active-format'],};

4. The first call#

   TypeScript

   import {  classifyNumberInput,  composePresentationContext,  formatCurrency,  formatDateOnly,  toIanaTimeZone,} from '@workspace/active-format';
   formatDateOnly('2026-12-31', 'nl'); // '31 dec. 2026'formatCurrency({amount: 1234.5, currency: 'EUR'}, 'nl'); // '€ 1.234,50'
   const presentation = composePresentationContext(  'en',  {dateFormat: 'DMY_NUMERIC'},  toIanaTimeZone('Europe/Amsterdam'),);classifyNumberInput('1234.56', presentation).number; // 1234.56// A grouping separator is refused while typing and accepted when pasted:classifyNumberInput('1,234.56', presentation).status; // 'invalid'classifyNumberInput('1,234.56', presentation, {mode: 'paste'}).number; // 1234.56

   The same calls, running in your browser:

   A first callClient

   PreviewCode

   Language	Calendar day	Amount
   en	31 Dec 2026	€1,234.50
   nl	31 dec. 2026	€ 1.234,50
   de	31. Dez. 2026	1.234,50 €

5. Check the runtime#

   If you call formatCurrency with exact decimal strings or formatElapsedDuration, check that your runtime supports them; see Errors and runtime.

Next#

Read Presentation before you pass a presentation through your own components.