intitial commit ver1

raga70 · Jul 3, 2024 · 990eede · 990eede
commit 990eede
Show file tree

Hide file tree

Showing 18 changed files with 5,467 additions and 0 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,18 @@
+// module.exports = {
+//   root: true,
+//   env: { browser: true, es2020: true },
+//   extends: [
+//     'eslint:recommended',
+//     'plugin:@typescript-eslint/recommended',
+//     'plugin:react-hooks/recommended',
+//   ],
+//   ignorePatterns: ['dist', '.eslintrc.cjs'],
+//   parser: '@typescript-eslint/parser',
+//   plugins: ['react-refresh'],
+//   rules: {
+//     'react-refresh/only-export-components': [
+//       'warn',
+//       { allowConstantExport: true },
+//     ],
+//   },
+// }
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/README.md b/README.md
@@ -0,0 +1,103 @@
+# React Auto Google Translate
+
+React Auto Google Translate is a library that automatically translate your React application, eliminating the need for maintaining JSON files for language definitions and wrapping strings, a common practice in other React translation libraries.
+
+### Features:
+
+- **Simplicity**: Avoid complex setups with JSON files; integrate translations directly.
+- **Efficiency**: Experience fast retranslations with component re-renders.
+- **No  Api key required**
+
+<hr/>
+
+
+## How to use:
+
+### Getting Started:
+
+Wrap your entire app or specific components within the `TranslationProvider` and set the `originalLang` prop to the current language of your content:
+
+```tsx
+<TranslationProvider originalLang="en">
+    <App/>
+</TranslationProvider>
+
+```
+
+### Exclusions:
+
+To prevent translation of specific elements, add the `notranslate` className to any component. All child nodes of this component will remain untranslated.
+
+### Dynamic Language Switching
+
+To switch languages dynamically within your application, utilize the `TranslationContext`:
+
+```tsx
+const SomeComponent = () => {
+    const { changeLanguage } = useContext(TranslationContext);
+
+    return (
+        <div>
+            <button onClick={() => changeLanguage('es')}>Change to Spanish</button>
+            <button onClick={() => changeLanguage('fr')}>Change to French</button>
+        </div>
+    );
+};
+
+```
+
+### Using the LanguageSelector Component
+
+Include the `LanguageSelector` component anywhere in your app to allow users to change the app’s language. All properties are optional.
+
+```tsx
+const SomeComponent = () => {
+    return (
+        <div>
+            <LanguageSelector
+                onlySpecificLanguages={ExampleOfOnlySpecificLanguages}
+                componentScale={0.78}
+                className="yourClassName"
+                customStyles={isDarkMode ? ExampleStylesForDarkMode : {}}
+            />
+        </div>
+    );
+};
+
+const ExampleOfOnlySpecificLanguages = [
+    { value: 'en', label: 'English', countryCode: 'us' },
+    { value: 'es', label: 'Spanish', countryCode: 'es' },
+    { value: 'fr', label: 'French', countryCode: 'fr' },
+];
+
+const ExampleStylesForDarkMode = {
+    control: (base, state) => ({
+        ...base,
+        background: "#333333",
+        color: "white",
+        borderColor: "#5a5a5a"
+    }),
+    menu: base => ({
+        ...base,
+        background: "#333333",
+        color: "white",
+    }),
+    menuList: base => ({
+        ...base,
+        background: "#333333",
+        color: "white",
+    }),
+    option: (base, state) => ({
+        ...base,
+        background: "#333333",
+        color: "white",
+    }),
+    singleValue: (base, state) => ({
+        ...base,
+        color: "white",
+    }),
+};
+
+```
+
+For a complete list of supported languages and country codes, visit [Google Cloud Translate Language Codes](https://cloud.google.com/translate/docs/languages).
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/lib/main.ts b/lib/main.ts
@@ -0,0 +1,2 @@
+export { TranslationProvider as TranslationProvider } from '../src/TranslationProvider.tsx';
+export {default as LanguageSelector} from '../src/LanguageSelector.tsx';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { TranslationProvider as TranslationProvider } from '../src/TranslationProvider.tsx';
		export {default as LanguageSelector} from '../src/LanguageSelector.tsx';