# FormatJS — Internationalization Framework for JavaScript

> A modular collection of JavaScript libraries for formatting numbers, dates, and strings with full ICU message syntax support.

## Install

Save in your project root:

# FormatJS — Internationalization Framework for JavaScript

## Quick Use
```bash
npm install react-intl
```
```jsx
import { IntlProvider, FormattedMessage } from "react-intl";

function App() {
  return (
    <IntlProvider locale="fr" messages={{ greeting: "Bonjour {name}" }}>
      <FormattedMessage id="greeting" values={{ name: "World" }} />
    </IntlProvider>
  );
}
```

## Introduction
FormatJS is a set of internationalization libraries that implement the ICU Message syntax standard. The project includes react-intl for React applications, along with standalone formatters for numbers, dates, relative times, and pluralized strings that work in any JavaScript environment.

## What FormatJS Does
- Formats numbers, currencies, dates, and relative times for any locale
- Parses and evaluates ICU MessageFormat strings with plurals and select expressions
- Provides React bindings via `react-intl` with hooks and components
- Compiles message catalogs at build time for smaller runtime bundles
- Polyfills missing `Intl` APIs for older browsers

## Architecture Overview
FormatJS is organized as a monorepo of small focused packages. The core `intl-messageformat` parser compiles ICU message strings into an AST, which is evaluated at runtime with locale data from the native `Intl` API. React-intl wraps this in a context provider and exposes hooks like `useIntl()` for component-level formatting.

## Self-Hosting & Configuration
- Install `react-intl` for React or `@formatjs/intl` for framework-agnostic use
- Wrap your app with `IntlProvider` passing locale and message objects
- Use the `@formatjs/cli` to extract messages from source code into JSON catalogs
- Compile messages ahead of time with `formatjs compile` to skip runtime parsing
- Add polyfills for `Intl.PluralRules` or `Intl.RelativeTimeFormat` if targeting older browsers

## Key Features
- Full ICU MessageFormat support including nested plurals and selects
- Build-time message extraction and compilation CLI
- Locale data sourced from the native `Intl` API, not bundled CLDR data
- TypeScript-first with generated message type checking
- Tree-shakeable package structure for minimal bundle impact

## Comparison with Similar Tools
- **i18next** — Plugin ecosystem is larger; FormatJS is more standards-aligned with ICU syntax
- **Lingui** — Macro-based extraction; FormatJS uses AST-based CLI extraction
- **vue-i18n** — Vue-specific; FormatJS targets React and vanilla JS
- **Rosetta** — Minimal key-value lookup; FormatJS handles complex pluralization and formatting

## FAQ
**Q: Is FormatJS only for React?**
A: No. The core packages (`intl-messageformat`, `@formatjs/intl`) work in any JS environment. `react-intl` is the React-specific layer.

**Q: How do I extract translatable strings from my code?**
A: Use `formatjs extract` CLI to scan source files and output a JSON message catalog.

**Q: Does it support server-side rendering?**
A: Yes. The IntlProvider works in SSR contexts, and the standalone formatters run in Node.js.

**Q: How large is the bundle?**
A: The `react-intl` package adds roughly 15-20 KB gzipped; using build-time compilation reduces this further.

## Sources
- https://github.com/formatjs/formatjs
- https://formatjs.io

---
Source: https://tokrepo.com/en/workflows/asset-43a27b78
Author: AI Open Source