tessl/npm-react-intl

Internationalize React apps with components and APIs for formatting dates, numbers, strings, pluralization and translations.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Provider and Context

Name: tessl/npm-react-intl
Author: tessl

The provider and context system establishes internationalization configuration for React component trees, managing locale data, messages, and formatting options.

Capabilities

IntlProvider Component

Root provider component that establishes internationalization context for all child components.

/**
 * Root provider component for React Intl internationalization context
 * @param props - Configuration and children
 */
function IntlProvider(props: React.PropsWithChildren<IntlConfig>): React.JSX.Element;

interface IntlConfig {
  /** Primary locale identifier (required) */
  locale: string;
  /** Translation messages mapping message IDs to localized strings */
  messages?: Record<string, string>;
  /** Custom format configurations for dates, numbers, etc. */
  formats?: CustomFormats;
  /** Default locale to fall back to when primary locale data is unavailable */
  defaultLocale?: string;
  /** Timezone identifier for date/time formatting */
  timeZone?: string;
  /** Callback for handling formatting errors */
  onError?: (error: ReactIntlError) => void;
  /** Callback for handling formatting warnings */
  onWarn?: (warning: string) => void;
  /** Default React component for text rendering */
  textComponent?: React.ComponentType | keyof React.JSX.IntrinsicElements;
  /** Whether to wrap rich text chunks in React fragments */
  wrapRichTextChunksInFragment?: boolean;
  /** Default rich text element mapping for message interpolation */
  defaultRichTextElements?: Record<string, FormatXMLElementFn<React.ReactNode>>;
  /** Whether to fall back to defaultMessage when message value is empty string */
  fallbackOnEmptyString?: boolean;
  /** Default format configurations */
  defaultFormats?: CustomFormats;
}

Usage Examples:

import { IntlProvider } from "react-intl";

// Basic setup
function App() {
  return (
    <IntlProvider locale="en-US" messages={{
      "greeting": "Hello {name}!",
      "itemCount": "You have {count} items"
    }}>
      <MyComponents />
    </IntlProvider>
  );
}

// Advanced configuration
function App() {
  const customFormats = {
    date: {
      short: { month: 'short', day: 'numeric', year: 'numeric' }
    },
    number: {
      currency: { style: 'currency', currency: 'EUR' }
    }
  };

  return (
    <IntlProvider 
      locale="de-DE" 
      defaultLocale="en-US"
      messages={germanMessages}
      formats={customFormats}
      timeZone="Europe/Berlin"
      onError={(error) => console.error('i18n error:', error)}
    >
      <MyComponents />
    </IntlProvider>
  );
}

RawIntlProvider Component

Direct context provider for advanced use cases where you need to provide a pre-created IntlShape object.

const RawIntlProvider: React.Provider<IntlShape>;

Usage Examples:

import { RawIntlProvider, createIntl, createIntlCache } from "react-intl";

// Using pre-created intl object
const cache = createIntlCache();
const intl = createIntl({
  locale: 'fr-FR',
  messages: frenchMessages
}, cache);

function App() {
  return (
    <RawIntlProvider value={intl}>
      <MyComponents />
    </RawIntlProvider>
  );
}

Context Objects

React contexts for accessing internationalization functionality.

/**
 * React context for IntlShape object
 * Supports global context sharing across multiple React Intl instances
 */
const IntlContext: React.Context<IntlShape>;

createIntl Function

Factory function for creating IntlShape objects programmatically, useful for server-side rendering or advanced configuration scenarios.

/**
 * Create an IntlShape object for programmatic usage
 * @param config - Internationalization configuration
 * @param cache - Optional formatter cache for performance optimization
 * @returns IntlShape object with all formatting methods
 */
function createIntl(config: IntlConfig, cache?: IntlCache): IntlShape;

Usage Examples:

import { createIntl, createIntlCache } from "react-intl";

// Create intl object for server-side rendering
const cache = createIntlCache();
const intl = createIntl({
  locale: 'es-ES',
  messages: {
    'greeting': '¡Hola {name}!'
  }
}, cache);

// Use for server-side message formatting
const serverMessage = intl.formatMessage(
  { id: 'greeting', defaultMessage: 'Hello {name}!' },
  { name: 'María' }
);

Cache Management

Performance optimization through formatter instance caching.

/**
 * Creates a cache for formatter instances to prevent memory leaks
 * @returns IntlCache object for reuse across intl instances
 */
function createIntlCache(): IntlCache;

interface IntlCache {
  // Internal cache structure (opaque)
}

Usage Examples:

import { createIntlCache, IntlProvider } from "react-intl";

// Create cache for reuse across multiple intl instances
const cache = createIntlCache();

function App() {
  return (
    <IntlProvider locale="en" messages={messages}>
      <MyComponents />
    </IntlProvider>
  );
}

// For server-side rendering with cache reuse
const intl1 = createIntl({ locale: 'en', messages: enMessages }, cache);
const intl2 = createIntl({ locale: 'fr', messages: frMessages }, cache);

Types

interface CustomFormats {
  date?: Record<string, Intl.DateTimeFormatOptions>;
  time?: Record<string, Intl.DateTimeFormatOptions>;  
  number?: Record<string, Intl.NumberFormatOptions>;
}

interface CustomFormatConfig<T extends keyof CustomFormats = keyof CustomFormats> {
  format?: string;
}

type FormatXMLElementFn<T, U = T> = (parts: Array<string | T>) => U;