### Install Solid Intl

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

Installs the Solid Intl library using npm, yarn, or pnpm package managers.

```bash
npm i @cookbook/solid-intl
# or
yarn add @cookbook/solid-intl
# or
pnpm add @cookbook/solid-intl
```

--------------------------------

### Select Format Example

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

Demonstrates the `{key, select, matches}` format for choosing output based on a key's value, similar to a switch statement. It includes examples for gendered pronouns and conditional tax application.

```bash
{gender, select,
    male {He}
    female {She}
    other {They}
} will respond shortly.

```

```bash
{taxableArea, select,
    yes {An additional {taxRate, number, percent} tax will be collected.}
    other {No taxes apply.}
}

```

--------------------------------

### Plural Format Example

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

Illustrates the `{key, plural, matches}` format for selecting output based on numeric pluralization rules, supporting categories like zero, one, few, many, other, and specific values. It shows how to format item counts.

```bash
Cart: {itemCount} {itemCount, plural,
    one {item}
    other {items}
}

```

```bash
You have {itemCount, plural,
    =0 {no items}
    one {1 item}
    other {{itemCount} items}
}.

```

--------------------------------

### Extract Messages using FormatJS CLI

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

Instructions on installing the FormatJS CLI and configuring a `package.json` script to extract translated messages from source files. It shows the command to run the extraction process and the expected output format.

```bash
npm i @formatjs/cli
# or
yarn add @formatjs/cli
# or
pnpm add @formatjs/cli
```

```bash
{
  "scripts": {
    "extract": "formatjs extract"
  }
}
```

```bash
npm run extract -- 'src/**/*.ts*' --ignore='**/*.d.ts' --out-file lang/en.json'
```

--------------------------------

### Setup IntlProvider in SolidJS App

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

Wraps the application's root component with the IntlProvider to establish the i18n context. It requires the user's locale and corresponding translations.

```tsx
import { IntlProvider } from '@cookbook/solid-intl'

// usersLocale = 'en', 'en-US', 'pt-BR', so on...
// translationsForUsersLocale = translations for selected locale
render(() =>
  <IntlProvider locale={usersLocale} messages={translationsForUsersLocale}>
    <App />
  </IntlProvider>,
  document.getElementById("root")!);
```

--------------------------------

### Rich Text Formatting Example

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

Shows how to embed rich text formatting within messages using custom tags like `<boldThis>` and `<link>`. This allows for richer presentation of text without breaking sentences into smaller chunks. Note that these are not XML/HTML tags.

```bash
Our price is <boldThis>{price, number, ::currency/USD precision-integer}</boldThis>
with <link>{pct, number, ::percent} discount</link>
```

--------------------------------

### Extracted Messages JSON

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

An example of the `lang/en.json` file generated after running the message extraction command, containing key-value pairs of message IDs and their default English translations.

```json
{
  "settings.list.header": "Control Panel",
  "settings.list.button.delete": "Delete user {name}"
}
```

--------------------------------

### selectordinal Formatting Example

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

Demonstrates the use of the `selectordinal` format to choose output based on locale-specific ordinal pluralization rules. It maps values to plural categories like 'one', 'two', 'few', and 'other', using '#' as a placeholder for the formatted numeric value.

```bash
It's my cat's {year, selectordinal,
    one {#st}
    two {#nd}
    few {#rd}
    other {#th}
} birthday!
```

--------------------------------

### Complex Message Formatting with Pluralization in Solid Intl

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

Illustrates complex message formatting in Solid Intl, specifically using pluralization rules. This example shows how to handle different grammatical forms based on a numeric value, using the `#` symbol for the matched count.

```ts
Hello, {name}, you have {itemCount, plural,
  =0 {no items}
  one {# item}
  other {# items}
}.
```

--------------------------------

### Number Formatting with Locale Sensitivity in Solid Intl

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

Demonstrates number formatting in Solid Intl, which is locale-sensitive. It shows basic number formatting and how to use format specifiers like `::percent` for percentages and currency formatting with `currency/GBP`.

```bash
I have {numCats, number} cats.
Almost {pctBlack, number, ::percent} of them are black.
```

```bash
The price of this bagel is {num, number, ::sign-always compact-short currency/GBP}
```

--------------------------------

### Date Formatting with Locale Sensitivity in Solid Intl

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

Explains date formatting in Solid Intl, emphasizing locale sensitivity. It shows how to use predefined format styles like `short`, `medium`, `long`, and `full` for displaying dates.

```bash
Sale begins {start, date, medium}
```

--------------------------------

### Define and Format Messages with useIntl

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

Demonstrates how to define messages using `defineMessages` and format them within a SolidJS component using the `useIntl` hook and its `formatMessage` method.

```tsx
import { defineMessages, useIntl } from '@cookbook/solid-intl';

const messages = defineMessages({
  greeting: {
    id: "app.greeting",
    defaultMessage: "Hello world!",
  },
});

function Component(props) {
  const { intl } = useIntl();

  return intl.formatMessage(messages.greeting) // outputs: Hello world!
}
```

--------------------------------

### Format Messages in SolidJS Component

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

Shows how to use the `useIntl` hook from `@cookbook/solid-intl` within a SolidJS component to format messages. It demonstrates formatting a simple message and a message with a placeholder variable.

```tsx
import { useIntl } from '@cookbook/solid-intl'

export function List(props) {
  const intl = useIntl();

  return (
    <section>
      <header>
        {intl.formatMessage({
          id: 'settings.list.header',
          defaultMessage: 'Control Panel',
        })}
      </header>
      <ul>
        <li>
          <button>
            {intl.formatMessage({
              id: 'settings.list.button.delete',
              defaultMessage: 'Delete user {name}',
            }, {
              name: props.name,
            })}
          </button>
        </li>
        <PasswordChange />
      </ul>
    </section>
  )
}
```

--------------------------------

### Simple Message Formatting in Solid Intl

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

Demonstrates the most basic message format in Solid Intl, which is a simple string without any arguments or complex formatting. This serves as the foundation for more advanced message definitions.

```ts
Hello everyone
```

--------------------------------

### IntlConfig Interface for IntlProvider

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

Defines the configuration options for the IntlProvider component, including locale, messages, formats, and error handling callbacks.

```tsx
interface IntlConfig {
  locale: Locale;
  timeZone?: string;
  fallbackOnEmptyString?: boolean;
  formats?: CustomFormats;
  messages: Record<MessageIds, string> | Record<MessageIds, MessageFormatElement[]>;
  defaultLocale?: string;
  defaultFormats?: CustomFormats;
  defaultRichTextElements?: Record<string, FormatXMLElementFn<JSXElement>>;
  onError(err: MissingTranslationError | MessageFormatError | MissingDataError | InvalidConfigError | UnsupportedFormatterError | FormatError)?: void;
  onWarn(warning: string)?: void;
}
```

--------------------------------

### Time Formatting with Locale Sensitivity in Solid Intl

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

Details time formatting in Solid Intl, highlighting its locale-sensitive nature. It covers different format styles such as `short`, `medium`, `long`, and `full` for representing time values.

```bash
Coupon expires at {expires, time, short}
```

--------------------------------

### Format Display Name (Currency)

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

Returns the localized display name for currency codes (e.g., ISO-4217). Browser support for Intl.DisplayNames is limited, so a polyfill might be necessary.

```TypeScript
intl.formatDisplayName('CNY', {type: 'currency'})
// outputs: Chinese Yuan
```

--------------------------------

### Format List Unit

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

Joins a list of strings representing units into a single string using locale-aware formatting. Browser support for Intl.ListFormat is limited, and a polyfill is recommended.

```TypeScript
intl.formatList(['5 hours', '3 minutes'], {type: 'unit'})
// outputs: 5 hours, 3 minutes
```

--------------------------------

### Argument Interpolation in Solid Intl Messages

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

Shows how to use simple `{key}` arguments within messages in Solid Intl. The specified key is looked up in the provided data, and its corresponding value is interpolated into the message string.

```ts
Hello, {name}
```

--------------------------------

### Format Plural Category

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

Returns a plural category string ('zero', 'one', 'two', 'few', 'many', or 'other') based on a given number and optional formatting options. This is a low-level utility suitable for single-language applications.

```TypeScript
type PluralFormatOptions = {
  type?: 'cardinal' | 'ordinal' = 'cardinal'
}

function formatPlural(
  value: number,
  options?: Intl.PluralFormatOptions
): 'zero' | 'one' | 'two' | 'few' | 'many' | 'other'
```

```TypeScript
intl.formatPlural(1)
// outputs: one
```

```TypeScript
intl.formatPlural(3, {style: 'ordinal'})
// outputs: one
```

--------------------------------

### Format Display Name (Script)

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

Provides a localized display name for script codes (e.g., ISO-15924). This function relies on Intl.DisplayNames and may require a polyfill for compatibility.

```TypeScript
intl.formatDisplayName('Deva', {type: 'script'})
// outputs: Devanagari
```

--------------------------------

### Define Messages with Solid Intl

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

Demonstrates how to use `defineMessages` and `defineMessage` from `@cookbook/solid-intl` to declare message descriptors. These functions are primarily used by CLI tools and plugins for compiling default messages.

```ts
interface MessageDescriptor {
  id?: string
  description?: string | object
  defaultMessage?: string
}

function defineMessages(
  messageDescriptors: Record<string, MessageDescriptor>
): Record<string, MessageDescriptor>

function defineMessage(messageDescriptor: MessageDescriptor): MessageDescriptor
```

```ts
import {defineMessages, defineMessage} from '@cookbook/solid-intl'

const messages = defineMessages({
  greeting: {
    id: 'app.home.greeting',
    defaultMessage: 'Hello, {name}!',
  },
})

const msg = defineMessage({
  id: 'single',
  description: 'header',
})
```

--------------------------------

### Format Display Name (Language)

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

Returns a localized display name for a given language value. It supports various options for style and fallback behavior and requires Intl.DisplayNames, which may need a polyfill.

```TypeScript
type FormatDisplayNameOptions = {
  style?: 'narrow' | 'short' | 'long'
  type?: 'language' | 'region' | 'script' | 'currency'
  fallback?: 'code' | 'none'
}

function formatDisplayName(
  value: string | number | Record<string, unknown>,
  options: FormatDisplayNameOptions
): string | undefined
```

```TypeScript
intl.formatDisplayName('zh-Hans-SG', {type: 'language'})
// outputs: Simplified Chinese (Singapore)
```

--------------------------------

### Format Message with Placeholder

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

Formats a message string using provided values to fill placeholders. It prioritizes translations from IntlProvider's messages prop and falls back to defaultMessage. Supports JSX elements and rich text formatting.

```tsx
function () {
  const messages = defineMessages({
    greeting: {
      id: 'app.greeting',
      defaultMessage: 'Hello, {name}!',
    },
  })

  return intl.formatMessage(messages.greeting, {name: 'Eric'})
  // outputs: Hello, Eric!
}
```

--------------------------------

### Solid Intl Message Descriptor Interface

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

Defines the structure of a Message Descriptor in Solid Intl, used for managing default messages and providing context for translators. It includes properties for message ID, description, and the default message content.

```ts
interface MessageDescriptor {
  id?: MessageIds;
  description?: string | object;
  defaultMessage?: string | MessageFormatElement[];
}
```

--------------------------------

### Format Display Name (Region)

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

Outputs the localized display name for region codes (e.g., ISO-3166). This functionality depends on Intl.DisplayNames, which may require a polyfill for wider browser support.

```TypeScript
intl.formatDisplayName('UN', {type: 'region'})
// outputs: United Nations
```

--------------------------------

### Format List Conjunction

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

Joins a list of strings into a single string using locale-aware conjunctions. This function relies on Intl.ListFormat and may require a polyfill for broader browser support.

```TypeScript
intl.formatList(['Me', 'myself', 'I'], {type: 'conjunction'})
// outputs: Me, myself and I
```

--------------------------------

### Format Message with Rich Text

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

Enables rich text formatting within messages by allowing custom formatting functions for placeholders. This provides flexibility in styling parts of the formatted message.

```tsx
function () {
  const messages = defineMessages({
    greeting: {
      id: 'app.greeting',
      defaultMessage: 'Hello, {name}!',
    },
  })

  return intl.formatMessage(messages.greeting, {
    name: 'Eric',
    bold: str => <b>{str}</b>,
  })
  // outputs: Hello, <b>Eric</b>!
}
```

--------------------------------

### Format Number with Solid Intl

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

Formats a number into a string using Intl.NumberFormat options, including currency and units. It accepts a numeric value and optional formatting options.

```typescript
function formatNumber(
  value: number,
  options?: Intl.NumberFormatOptions & {format?: string}
): string
```

```javascript
intl.formatNumber(1000, {style: 'currency', currency: 'USD'})
// outputs: US$1,000.00
```

```javascript
intl.formatNumber(1000, {
  style: 'unit',
  unit: 'kilobyte',
  unitDisplay: 'narrow',
})
// outputs: 1,000kB
```

```javascript
intl.formatNumber(1000, {
  unit: 'fahrenheit',
  unitDisplay: 'long',
  style: 'unit',
})
// outputs: 1,000 degrees Fahrenheit
```

--------------------------------

### Format Time with Solid Intl

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

Formats a date value into a time string with default hour and minute options. It accepts a date or a number parseable as a date and conforms to Intl.DateTimeFormatOptions.

```typescript
function formatTime(
  value: number | Date,
  options?: Intl.DateTimeFormatOptions & {format?: string}
): string
```

```javascript
intl.formatTime(Date.now())
// outputs: "4:03 PM"
```

--------------------------------

### Define Messages with Multiple Locales

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

Illustrates how to define messages for multiple locales (e.g., English and French) within a single JavaScript object, using the ICU Message syntax for placeholders.

```ts
const messages = {
  en: {
    GREETING: 'Hello {name}',
  },
  fr: {
    GREETING: 'Bonjour {name}',
  },
}
```

--------------------------------

### Format Date with Solid Intl

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

Formats a date value into a string using specified options. It accepts a date or a number parseable as a date and conforms to Intl.DateTimeFormatOptions.

```typescript
function formatDate(
  value: number | Date,
  options?: Intl.DateTimeFormatOptions & {format?: string}
): string
```

```javascript
intl.formatDate(Date.now(), {
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
})

// outputs: 04/01/2023
```

--------------------------------

### Format Relative Time with Solid Intl

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

Formats a relative time difference into a human-readable string. Requires Intl.RelativeTimeFormat support or a polyfill. It accepts a numeric value, a unit, and optional formatting options.

```typescript
type Unit =
  | 'second'
  | 'minute'
  | 'hour'
  | 'day'
  | 'week'
  | 'month'
  | 'quarter'
  | 'year'

type RelativeTimeFormatOptions = {
  numeric?: 'always' | 'auto'
  style?: 'long' | 'short' | 'narrow'
}

function formatRelativeTime(
  value: number,
  unit: Unit,
  options?: Intl.RelativeTimeFormatOptions & {
    format?: string
  }
): string
```

```javascript
intl.formatRelativeTime(0)
// outputs: in 0 seconds
```

```javascript
intl.formatRelativeTime(-24, 'hour', {style: 'narrow'})
// outputs: 24 hr ago
```

--------------------------------

### Format Message with JSX Element

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

Formats a message string, allowing JSX elements to be embedded within the message values. This enables rich text rendering within formatted messages.

```tsx
function () {
  const messages = defineMessages({
    greeting: {
      id: 'app.greeting',
      defaultMessage: 'Hello, {name}!',
    },
  })

  return intl.formatMessage(messages.greeting, {name: <b>Eric</b>})
  // outputs: Hello, <b>Eric</b>!
}
```

--------------------------------

### Quoting and Escaping in Solid Intl

Source: https://github.com/the-cookbook/solid-intl/blob/main/README.md

Explains how to use the ASCII apostrophe (') for escaping syntax characters and interpolations in Solid Intl messages. It covers escaping single characters, multiple characters, and preventing tags from being interpreted. Consecutive apostrophes are used to represent a literal apostrophe.

```ts
"This is not an interpolation: '{word}"
//→ "This is not an interpolation: {word}"
"These are not interpolations: '{word1} {word2}'"
//→ "These are not interpolations: {word1} {word2}"
"'<notATag>"
//→ "<notATag>"
"'<notATag>hello</notATag>'
//→ "<notATag>hello</notATag>"
```

```ts
"This '{isn''t}' obvious."
//→ "This {isn't} obvious."
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.