docs: add instructions on how to setup react + acknowledgments section

README.md

@@ -54,6 +54,7 @@ translate your astro websites!
   - [Namespaces](#namespaces)
   - [AstroI18nextConfig Props](#astroi18nextconfig-props)
 - [✨ Contributors](#-contributors)
+- [❤️ Acknowledgments](#️-acknowledgments)
 - [📜 License](#-license)
 
 ## 🚀 Getting started
@@ -105,6 +106,12 @@ npm install astro-i18next
              └── translation.json
    ```
 
+   ℹ️ `astro-i18next` loads your translation files both server-side and
+   client-side using
+   [i18next-fs-backend](https://github.com/i18next/i18next-fs-backend) and
+   [i18next-http-backend](https://github.com/i18next/i18next-http-backend)
+   plugins.
+
    ℹ️ You may choose to organize your translations into multiple files instead
    of a single file per locale [using namespaces](#namespaces).
 
@@ -253,10 +260,18 @@ src
       fr: {
         "about": "a-propos",
         "contact-us": "contactez-nous",
+        "products": {
+          "index": "produits",
+          "categories": "categories",
+        }
       }
       es: {
         "about": "a-proposito",
         "contact-us": "contactenos",
+        "products": {
+          "index": "productos",
+          "categories": "categorias",
+        }
       }
      },
    };
@@ -269,21 +284,32 @@ src
 src
 └── pages
     ├── es
+    |   ├── productos
+    |   |   ├── categorias.astro
+    |   |   └── index.astro
     |   ├── a-proposito.astro
     |   ├── contactenos.astro
     |   └── index.astro
     ├── fr
+    |   ├── produits
+    |   |   ├── categories.astro
+    |   |   └── index.astro
     |   ├── a-propos.astro
     |   ├── contactez-nous.astro
     |   └── index.astro
+    ├── products
+    |   ├── categories.astro
+    |   └── index.astro
     ├── about.astro
     ├── contact-us.astro
     └── index.astro
 ```
 
-**Note:** The [localizedPath](#localizepath-function) and
-[localizeUrl](#localizeurl-function) functions will retrieve the correct route
-based on the mappings.
+> **Note**
+>
+> The [localizedPath](#localizepath-function) and
+> [localizeUrl](#localizeurl-function) utility functions will retrieve the
+> correct route based on your mappings.
 
 ---
 
@@ -400,8 +426,10 @@ const interpolated = interpolate(
 Sets a path within a given locale. If the locale param is not specified, the
 current locale will be used.
 
-**Note:** This should be used instead of hard coding paths to other pages. It
-will take care of setting the right path depending on the locale you set.
+> **Note**
+>
+> This should be used instead of hard coding paths to other pages. It will take
+> care of setting the right path depending on the locale you set.
 
 ```astro
 ---
@@ -422,8 +450,10 @@ i18next.changeLanguage("fr");
 Sets a url within a given locale. If the locale param is not specified, the
 current locale will be used.
 
-**Note:** This should be used instead of hard coding urls for internal links. It
-will take care of setting the right url depending on the locale you set.
+> **Note**
+>
+> This should be used instead of hard coding urls for internal links. It will
+> take care of setting the right url depending on the locale you set.
 
 ```astro
 ---
@@ -463,8 +493,8 @@ src
       └-- index.astro
 ```
 
-1. Using the `i18next-fs-backend` plugin, it can easily be setup in your
-   `backend.loadPath` alongside the `ns` and `defaultNS` keys, like so:
+1. It can easily be setup using the `namespaces` and `defaultNamespace` keys,
+   like so:
 
    ```ts
    /** @type {import('astro-i18next').AstroI18nextConfig} */
@@ -560,6 +590,17 @@ This project follows the
 [all-contributors](https://github.com/all-contributors/all-contributors)
 specification. Contributions of any kind welcome!
 
+## ❤️ Acknowledgments
+
+This wouldn't have been possible without the awesome work from the
+[Locize](https://locize.com/) and [Astro](https://astro.build/) teams.
+
+Inspired by some of the greatly thought-out i18n implementations:
+
+- [next-i18next](https://github.com/i18next/next-i18next)
+- [react-i18next](https://github.com/i18next/react-i18next)
+- [NextJS's Internationalized Routing](https://nextjs.org/docs/advanced-features/i18n-routing)
+
 ## 📜 License
 
 Code released under the [MIT License](https://choosealicense.com/licenses/mit/).

examples/react/README.md

@@ -1,7 +1,80 @@
-# astro-i18next examples - React
+# astro-i18next examples - React <!-- omit in toc -->
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/yassinedoghri/astro-i18next/tree/latest/examples/react)
 
+- [🛠️ How to setup?](#️-how-to-setup)
+  - [1. Install](#1-install)
+  - [2. Configure](#2-configure)
+- [🌐 Client-side locale detection](#-client-side-locale-detection)
+- [👀 Want to learn more?](#-want-to-learn-more)
+
+## 🛠️ How to setup?
+
+astro-i18next loads two i18next configs by default. One on the server side, the
+other one client side (where the required `react-i18next` package will be
+initialized).
+
+### 1. Install
+
+```bash
+npm install astro-i18next @astrojs/react react-i18next
+```
+
+### 2. Configure
+
+1. Add `astro-i18next` to your `astro.config.mjs`:
+
+   ```js
+   import { defineConfig } from "astro/config";
+   import react from "@astrojs/react";
+   import astroI18next from "astro-i18next";
+
+   export default defineConfig({
+     integrations: [react(), astroI18next()],
+   });
+   ```
+
+2. Configure `astro-i18next` in your `astro-i18next.config.mjs` file:
+
+   ```js
+   /** @type {import('astro-i18next').AstroI18nextConfig} */
+   export default {
+     defaultLocale: "en",
+     locales: ["en", "fr"],
+   };
+   ```
+
+3. By default, `astro-i18next` expects your translations to be organized inside
+   your `public` folder, in a `locales` folder:
+
+   ```bash
+     public
+     └── locales  # create this folder to store your translation strings
+         ├── en
+         |   └── translation.json
+         └── fr
+             └── translation.json
+   ```
+
+**That's it!** You can now start translating!
+
+## 🌐 Client-side locale detection
+
+⚠️ **astro-18next** implements client-side locale detection using the great
+[`i18next-browser-languageDetector`](https://github.com/i18next/i18next-browser-languageDetector)
+plugin.
+
+To have the page locale be detected, the default configuration is set to check
+for the html `lang` attribute in your page:
+
+```astro
+---
+import i18next from "i18next";
+---
+
+<html lang={i18next.language}>...</html>
+```
+
 ## 👀 Want to learn more?
 
 Feel free to check [astro-i18next's documentation](../../README.md).