next-intlayer 2.0.11 → 2.0.12

package/README.md

@@ -1,25 +1,67 @@
 <div align="center">
-  <a href="https://www.npmjs.com/package/intlayer">
+  <a href="https://www.npmjs.com/package/next-intlayer">
     <img src="docs/assets/logo.png" width="500" alt="intlayer" />
   </a>
 </div>
 
 <div align="center">
-  <a href="https://www.npmjs.com/package/intlayer">
-    <img alt="npm" src="https://img.shields.io/npm/v/intlayer.svg?labelColor=49516F&color=8994BC" />
+  <a href="https://www.npmjs.com/package/next-intlayer">
+    <img alt="npm" src="https://img.shields.io/npm/v/next-intlayer.svg?labelColor=49516F&color=8994BC" />
   </a>
-  <a href="https://npmjs.org/package/intlayer">
-    <img alt="downloads" src="https://badgen.net/npm/dm/intlayer?labelColor=49516F&color=8994BC" />
+  <a href="https://npmjs.org/package/next-intlayer">
+    <img alt="downloads" src="https://badgen.net/npm/dm/next-intlayer?labelColor=49516F&color=8994BC" />
   </a>
-  <a href="https://npmjs.org/package/intlayer">
-    <img alt="types included" src="https://badgen.net/npm/types/intlayer?labelColor=49516F&color=8994BC" 
+  <a href="https://npmjs.org/package/next-intlayer">
+    <img alt="types included" src="https://badgen.net/npm/types/next-intlayer?labelColor=49516F&color=8994BC" 
   />
   </a>
 </div>
 
 # Intlayer: Next-Level Content Management in JavaScript
 
-**Intlayer** is an innovative Content Management System (CMS) designed specifically for JavaScript developers. It enables seamless transpilation of JavaScript content into structured dictionaries, making integration into your codebase straightforward and efficient.
+**Intlayer** is an internationalization library designed specifically for JavaScript developers. It allow the declaration of your content everywhere in your code. It converts declaration of multilingual content into structured dictionaries to integrate easily in your code. Using TypeScript, **Intlayer** make your development stronger and more efficient.
+
+## Example of usage
+
+```bash
+.
+├── ClientComponent
+│   ├── index.content.ts
+│   └── index.tsx
+└── ServerComponent
+    ├── index.tsx
+    └── index.content.ts
+```
+
+```tsx
+// ./ClientComponent/index.content.ts
+
+import { DeclarationContent, t } from "intlayer";
+
+const clientComponentContent: DeclarationContent = {
+  id: "client-component",
+  myTranslatedContent: t({
+    en: "Hello World",
+    fr: "Bonjour le monde",
+    es: "Hola Mundo",
+  }),
+};
+
+export default clientComponentContent;
+```
+
+```tsx
+// ./ClientComponent/index.tsx
+"use client";
+
+import { useIntlayer } from "next-intlayer";
+
+export const ClientComponent = () => {
+  const { myTranslatedContent } = useIntlayer("client-component");
+
+  return <span>{myTranslatedContent}</span>;
+};
+```
 
 ## Why Choose Intlayer?
 
@@ -294,6 +336,23 @@ export const generateMetadata = ({
 };
 ```
 
+## (Optional) Step 9: Change the language of your content
+
+To change the language of your content, you can use the `setLocale` function provided by the `useLocale` hook. This function allows you to set the locale of the application and update the content accordingly.
+
+```tsx
+import { Locales } from "intlayer";
+import { useLocale } from "next-intlayer";
+
+const MyComponent = () => {
+  const { setLocale } = useLocale();
+
+  return (
+    <button onClick={() => setLocale(Locales.English)}>Change Language</button>
+  );
+};
+```
+
 ## Configure TypeScript
 
 Intlayer use module augmentation to get benefits of TypeScript and make your codebase stronger.

package/package.json

@@ -1,29 +1,38 @@
 {
   "name": "next-intlayer",
-  "version": "2.0.11",
+  "version": "2.0.12",
   "private": false,
-  "description": "Webpack configuration for IntLayer using NextJS",
+  "description": "Internationalisation tool for Next.js applications. Declare your multilingual contant in the same lever than your component. Powered by TypeScript, declaration files.",
   "keywords": [
     "intlayer",
-    "webpack",
-    "application",
-    "transpile",
+    "multilingual",
+    "i18n",
+    "internationalization",
     "nextjs",
     "typescript",
-    "javascript",
-    "json",
-    "file"
+    "react",
+    "json"
   ],
-  "homepage": "https://github.com/aypineau/intlayer",
+  "homepage": "https://intlayer.org",
+  "bugs": {
+    "url": "https://github.com/aypineau/intlayer/issues"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/aypineau/intlayer.git"
   },
-  "license": "MIT",
+  "license": "Apache-2.0",
   "author": {
     "name": "Aymeric PINEAU",
     "url": "https://github.com/aypineau"
   },
+  "contributors": [
+    {
+      "name": "Aymeric Pineau",
+      "email": "ay.pineau@gmail.com",
+      "url": "https://github.com/aypineau"
+    }
+  ],
   "exports": {
     ".": {
       "types": "./dist/esm/index.d.mts",
@@ -47,6 +56,8 @@
     },
     "./package.json": "./package.json"
   },
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/esm/index.mjs",
   "typesVersions": {
     "*": {
       "package.json": [
@@ -63,13 +74,13 @@
     "negotiator": "^0.6.3",
     "next": "14.1.4",
     "webpack": "^5.92.1",
-    "@intlayer/chokidar": "^2.0.11",
-    "@intlayer/core": "^2.0.11",
-    "@intlayer/dictionaries-entry": "^2.0.11",
-    "@intlayer/webpack": "^2.0.11",
-    "intlayer": "^2.0.11",
-    "@intlayer/config": "^2.0.11",
-    "react-intlayer": "^2.0.11"
+    "@intlayer/chokidar": "^2.0.12",
+    "@intlayer/config": "^2.0.12",
+    "@intlayer/core": "^2.0.12",
+    "@intlayer/dictionaries-entry": "^2.0.12",
+    "@intlayer/webpack": "^2.0.12",
+    "intlayer": "^2.0.12",
+    "react-intlayer": "^2.0.12"
   },
   "devDependencies": {
     "@types/negotiator": "^0.6.3",