react-intlayer 2.0.11 → 2.0.12

package/README.md

@@ -1,25 +1,64 @@
 <div align="center">
-  <a href="https://www.npmjs.com/package/intlayer">
+  <a href="https://www.npmjs.com/package/react-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/react-intlayer">
+    <img alt="npm" src="https://img.shields.io/npm/v/react-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/react-intlayer">
+    <img alt="downloads" src="https://badgen.net/npm/dm/react-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/react-intlayer">
+    <img alt="types included" src="https://badgen.net/npm/types/react-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
+.
+├── Component1
+│   ├── index.content.ts
+│   └── index.tsx
+└── Component2
+    ├── index.tsx
+    └── index.content.ts
+```
+
+```tsx
+// ./Component1/index.content.ts
+
+import { DeclarationContent, t } from "intlayer";
+
+const component1Content: DeclarationContent = {
+  id: "component1",
+  myTranslatedContent: t({
+    en: "Hello World",
+    fr: "Bonjour le monde",
+    es: "Hola Mundo",
+  }),
+};
+```
+
+```tsx
+// ./Component1/index.tsx
+
+import { useIntlayer } from "react-intlayer";
+
+export const Component1 = () => {
+  const { myTranslatedContent } = useIntlayer("component1");
+
+  return <span>{myTranslatedContent}</span>;
+};
+```
 
 ## Why Choose Intlayer?
 
@@ -137,7 +176,7 @@ export default appContent;
 
 [See how to declare your Intlayer declaration files](https://github.com/aypineau/intlayer/blob/main/docs/docs/content_declaration/get_started_en.md).
 
-### Step 5: Utilize Intlayer in Your Code
+## Step 5: Utilize Intlayer in Your Code
 
 Access your content dictionaries throughout your application:
 
@@ -190,6 +229,25 @@ export default App;
 > <img src={content.image.src.value} alt={content.image.value} />
 > ```
 
+## (Optional) Step 6: 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 "react-intlayer";
+
+const MyComponent = () => {
+  const { setLocale } = useLocale();
+
+  return (
+    <button onClick={() => setLocale(Locales.English)}>
+      Change Language to English
+    </button>
+  );
+};
+```
+
 ## Configure TypeScript
 
 Intlayer use module augmentation to get benefits of TypeScript and make your codebase stronger.

package/package.json

@@ -1,31 +1,39 @@
 {
   "name": "react-intlayer",
-  "version": "2.0.11",
+  "version": "2.0.12",
   "private": false,
-  "description": "Internationalization layer for React applications - Layer of abstraction between the business logic and the data access layer. Manage internationalization in a simple way, through TypeScript, JavaScript or JSON declaration file.",
+  "description": "Internationalization layer for React applications. Declare your multilingual contant in the same lever than your component. Powered by TypeScript, declaration files.",
   "keywords": [
     "intlayer",
-    "layer",
-    "abstraction",
     "data",
     "internationalization",
+    "multilingual",
     "i18n",
     "typescript",
-    "javascript",
     "react",
-    "json",
-    "file"
+    "vite",
+    "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",
@@ -54,6 +62,8 @@
     },
     "./package.json": "./package.json"
   },
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/esm/index.mjs",
   "typesVersions": {
     "*": {
       "package.json": [
@@ -75,13 +85,13 @@
     "react-cookie": "^7.1.4",
     "vite": "^5.3.1",
     "webpack": "^5.92.1",
-    "@intlayer/config": "^2.0.11",
-    "@intlayer/dictionaries-entry": "^2.0.11",
-    "@intlayer/core": "^2.0.11",
-    "@intlayer/webpack": "^2.0.11",
-    "intlayer": "^2.0.11",
-    "@intlayer/chokidar": "^2.0.11",
-    "intlayer-editor": "^2.1.10"
+    "@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",
+    "intlayer-editor": "^2.1.11"
   },
   "devDependencies": {
     "@craco/types": "^7.1.0",