Updates jan 2026 (#313)

* Update dependencies to latest versions and migrate to React 19

- Update all dependencies to latest versions
- Migrate to React 19 createRoot API (replaces deprecated ReactDOM.render)
- Update qrcode.react import to v4 named export (QRCodeSVG)

* Format CSS with prettier

* Add Hebrew translation

* Add Slovak translation

* Add Malagasy translation

* Add Bangla translation

* Init field

* Change the logic concerning number of cards to print

* fix/clean

* Fix Increment-field-ID-in-the-print-area

* Increment-field-ID-in-the-print-area

* Review id implementation logic

* Fix git commit

* Handle Query parameter

* Fix package.json

* Fix query parameter for language

* fix query parameter for language

* Fix EncryptionModeChange query parameters // Error when non in query

* Fix EncryptionModeChange query parameters // Error when empty in query

* clean Setting.js don't need to import i18n

* clean file App.js

* first iteration for Hash

* Add Esperanto translation

* Update translations for Occitan

2 lines added

* Update translations.js

Added Swiss German to the Translations JavaScript-File

* Update translations.js

Removed custom Translations-Strings of my own Version.

* Update README.md

* Format translations.js with prettier

---------

Co-authored-by: Ido Bronfeld <idobronfeld@gmail.com>
Co-authored-by: Matej Kubinec <matej.kubinec@outlook.com>
Co-authored-by: mpilasy <88362233+mpilasy@users.noreply.github.com>
Co-authored-by: Tarek Hasan <94107336+Tarek-Hasan@users.noreply.github.com>
Co-authored-by: ofostier <ofostier@gmail.com>
Co-authored-by: zeecho <30541894+zeecho@users.noreply.github.com>
Co-authored-by: Mejans <61360811+Mejans@users.noreply.github.com>
Co-authored-by: Jan Zehnder <44242812+NZehnder@users.noreply.github.com>

4 files changed, 64 insertions, 5 deletions

diff --git a/src/components/Settings.js b/src/components/Settings.js
index 837b4f0..0485aaf 100644
--- a/src/components/Settings.js
+++ b/src/components/Settings.js
@@ -20,6 +20,7 @@ export const Settings = (props) => {
     { label: 'WEP', value: 'WEP' },
   ];
   const eapMethods = [{ label: 'PWD', value: 'PWD' }];
+
   const langSelectDefaultValue = () => {
     const t = Translations.filter((t) => t.id === i18n.language);
     if (t.length !== 1) {
diff --git a/src/components/WifiCard.js b/src/components/WifiCard.js
index 70e1189..e977ac8 100644
--- a/src/components/WifiCard.js
+++ b/src/components/WifiCard.js
@@ -8,7 +8,7 @@ import {
   Text,
   TextareaField,
 } from 'evergreen-ui';
-import QRCode from 'qrcode.react';
+import { QRCodeSVG as QRCode } from 'qrcode.react';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import logo from '../../src/images/wifi.png';
@@ -71,6 +71,9 @@ export const WifiCard = (props) => {
     return !eapIdentityFieldLabel() ? '' : t('wifi.encryption.eapMethod');
   };
 
+  const keyid = props.keyid || '';
+  const suffixKeyID = (prefix) => `${prefix}-${keyid}`;
+
   return (
     <Card
       className="card-print"
@@ -102,7 +105,7 @@ export const WifiCard = (props) => {
 
         <Pane width={'100%'}>
           <TextareaField
-            id="ssid"
+            id={suffixKeyID('ssid')}
             type="text"
             marginBottom={5}
             autoComplete="off"
@@ -120,7 +123,7 @@ export const WifiCard = (props) => {
           {props.settings.encryptionMode === 'WPA2-EAP' && (
             <>
               <TextareaField
-                id="eapmethod"
+                id={suffixKeyID('eapmethod')}
                 type="text"
                 marginBottom={5}
                 readOnly={true}
@@ -130,7 +133,7 @@ export const WifiCard = (props) => {
               />
 
               <TextareaField
-                id="identity"
+                id={suffixKeyID('identity')}
                 type="text"
                 marginBottom={5}
                 autoComplete="off"
@@ -150,7 +153,7 @@ export const WifiCard = (props) => {
           )}
           {!(props.settings.hidePassword || !props.settings.encryptionMode) && (
             <TextareaField
-              id="password"
+              id={suffixKeyID('password')}
               type="text"
               maxLength="63"
               autoComplete="off"
diff --git a/src/components/style.css b/src/components/style.css
index 10eac9b..87ba63a 100644
--- a/src/components/style.css
+++ b/src/components/style.css
@@ -67,6 +67,13 @@ button {
   #print-area,
   #print-area * {
     visibility: visible;
+    /* For printing, use a font stack that prioritizes system fonts 
+       to ensure CJK characters are rendered correctly in Chrome. */
+    font-family:
+      'PingFang SC', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans JP',
+      'Noto Sans KR', 'Microsoft YaHei', serif;
+    font-weight: 500;
+    font-style: semibold;
   }
   #print-area {
     position: absolute;
diff --git a/src/components/useHashParam.js b/src/components/useHashParam.js
new file mode 100644
index 0000000..e43e1e4
--- /dev/null
+++ b/src/components/useHashParam.js
@@ -0,0 +1,48 @@
+import { useState, useEffect, useCallback } from 'react';
+
+const getHashSearchParams = (location) => {
+  const hash = location.hash.slice(1);
+  const [prefix, query] = hash.split('?');
+
+  return [prefix, new URLSearchParams(query)];
+};
+
+const getHashParam = (key, location = window.location) => {
+  const [_, searchParams] = getHashSearchParams(location);
+  return searchParams.get(key);
+};
+
+const setHashParam = (key, value, location = window.location) => {
+  const [prefix, searchParams] = getHashSearchParams(location);
+
+  if (typeof value === 'undefined') {
+    searchParams.delete(key);
+  } else {
+    searchParams.set(key, value);
+  }
+
+  const search = searchParams.toString();
+  location.hash = search ? `${prefix}?${search}` : prefix;
+};
+
+const useHashParam = (key) => {
+  const [innerValue, setInnerValue] = useState();
+
+  useEffect(() => {
+    const handleHashChange = () => setInnerValue(getHashParam(key));
+    handleHashChange();
+    window.addEventListener('hashchange', handleHashChange);
+    return () => window.removeEventListener('hashchange', handleHashChange);
+  }, [key]);
+
+  const setValue = useCallback(
+    (value) => {
+      setHashParam(key, value);
+    },
+    [key]
+  );
+
+  return [innerValue, setValue];
+};
+
+export default useHashParam;