\n \n \n )\n}\n```\n\n`children` is used as the translation key.\nIf no translation is found, the key itself is rendered.\n\n## Dynamic translations\n\nUse `json` when the translated value is only known at render time.\n\n```tsx\n\n status_label\n\n```\n\n## HTML rendering\n\n```tsx\n{'article_body'}\n```\n\nWhen `html` is enabled the resolved string is rendered with `dangerouslySetInnerHTML`, so only use trusted content.\n\n## Translation mode\n\nWhen `translating` is enabled, each `I18N` node is wrapped with a visible border. Right click on desktop or long press on touch devices to edit a translation.\n\n```tsx\n {\n socket.send(JSON.stringify({\n event: 'translation',\n data: payload,\n }))\n }}\n>\n \n\n```\n\n`push` receives:\n\n```ts\ntype OnTranslateProps = {\n language_id: string\n key: string\n value: string\n namespace?: string\n dynamic?: boolean\n}\n```\n\n## Using the provider context\n\n```tsx\n'use client'\n\nimport { useI18NContext } from 'next-simple-i18n'\n\nexport function LanguageSwitcher() {\n const { language_id, set_language_id, translator } = useI18NContext()\n\n return (\n
\n \n \n \n
\n )\n}\n```\n\n`translator` exposes `on`, `off`, `toggle`, `edit`, `key`, and `value`.\n\n## Vite plugin\n\nThe Vite plugin listens for websocket messages shaped like:\n\n```ts\n{\n event: 'translation',\n data: OnTranslateProps\n}\n```\n\nand writes the translated value into `.//.json`.\n\n```ts\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport { I18NTranslatorPlugin } from 'next-simple-i18n'\n\nexport default defineConfig({\n plugins: [\n react(),\n I18NTranslatorPlugin('messages'),\n ],\n})\n```\n\nWith this setup the plugin writes to files like `./messages/en.json` and `./messages/vi.json`.\n\n## Notes\n\n- `I18NProvider` is a thin wrapper around the client provider.\n- This package does not load files for you; you provide the translation database.\n- The Vite plugin is intended for local development workflows where the dev server can write to your translation files.\n","readmeFilename":"README.md","description":"A small React/Next i18n helper focused on simple string lookup and an optional in-app translation mode.","homepage":"https://github.com/duongvanba/next-simple-i18n#readme","bugs":{"url":"https://github.com/duongvanba/next-simple-i18n/issues"}}