This package is in development.

preact-intlayer: Internationalize (i18n) an Preact application

Intlayer is a suite of packages designed specifically for JavaScript developers. It is compatible with frameworks like Preact, Svelte, and Express.js.

The preact-intlayer package allows you to internationalize your Preact application. It provides context providers and hooks for Preact internationalization.

Why Internationalize Your Preact Application?

Internationalizing your Preact application is essential for serving a global audience effectively. It allows your application to deliver content and messages in the preferred language of each user. This capability enhances user experience and broadens your application's reach by making it more accessible and relevant to people from different linguistic backgrounds.

Why to integrate Intlayer?

• JavaScript-Powered Content Management: Harness the flexibility of JavaScript to define and manage your content efficiently.
• Type-Safe Environment: Leverage TypeScript to ensure all your content definitions are precise and error-free.
• Integrated Content Files: Keep your translations close to their respective components, enhancing maintainability and clarity.

Installation

Install the necessary package using your preferred package manager:

npm install preact-intlayer

yarn add preact-intlayer

pnpm add preact-intlayer

Example of usage

With Intlayer, you can declare your content in a structured way anywhere in your codebase.

By default, Intlayer scans for files with the extension .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}.

You can modify the default extension by setting the contentDir property in the configuration file.

.
├── intlayer.config.ts
└── src
    └── components
        ├── Component1
        │   ├── index.content.ts
        │   └── index.preact
        └── Component2
            ├── index.content.ts
            └── index.preact

Declare your content

preact-intlayer is made to work with the intlayer package.intlayer is a package that allows you to declare your content anywhere in your code. It converts multilingual content declarations into structured dictionaries that integrate seamlessly into your application.

Here’s an example of content declaration:

import { t, type Dictionary } from "intlayer";

const component1Content = {
  key: "component-1",
  content: {
    myTranslatedContent: t({
      en: "Hello World",
      fr: "Bonjour le monde",
      es: "Hola Mundo",
    }),
    numberOfCar: enu({
      "<-1": "Less than minus one car",
      "-1": "Minus one car",
      "0": "No cars",
      "1": "One car",
      ">5": "Some cars",
      ">19": "Many cars",
    }),
  },
} satisfies Dictionary;

export default component1Content;

Utilize Content in Your Code

...

Mastering the internationalization of your Preact application

Intlayer provides a lot of features to help you internationalize your Preact application.

To learn more about these features, refer to the Preact Internationalization (i18n) with Intlayer and Vite and Preact guide for Vite and Preact Application, or the Preact Internationalization (i18n) with Intlayer and Preact (CRA) guide for Preact Create App.

Functions provided by preact-intlayer package

The preact-intlayer package also provides some functions to help you to internationalize your application.

Read about Intlayer

• Intlayer Website

• Intlayer Documentation

• Intlayer GitHub

• Ask your questions to our smart documentation