@hortiview/default-components 0.0.12022 → 0.0.12167

package/README.md

@@ -1,6 +1,6 @@
 # Hortiview Default Components
 
-This is a component library that provides default components that posess default translations for the basic languages used in the HortiView Platform.
+This is a component library that provides default components that possess default translations for the basic languages used in the HortiView Platform.
 
 Supported languages are currently: English, spanish and turkish.
 
@@ -10,6 +10,49 @@ Supported languages are currently: English, spanish and turkish.
 
 `yarn add @hortiview/default-components`
 
+## Important Note
+
+To ensure that this library´s components always have access to the current platform language, it is mandatory to pass the language from the base props or from the i18n instance the components are wrapped in.
+
+To do so please call the useChangeDefaultComponentsLanguage-hook in a place where you can access the current language. The current language has to be provided to the hook as a parameter.
+The hook only has to be called once inside of a module.
+
+When using the current language from the base props this might look like shown in the following example:
+
+```tsx
+import { useChangeDefaultComponentsLanguage } from '@hortiview/default-components';
+import { useBasePropsStore } from './stores/BaseStore';
+
+export const ModuleBase = () => {
+  const currentLanguage = useBasePropsStore(state => state.currentLanguage);
+
+  /**
+   * needed to handle translations of the default components
+   */
+  useChangeDefaultComponentsLanguage(currentLanguage);
+
+  return <AnyComponent />;
+};
+```
+
+When using i18next this might look like shown in the following example:
+
+```tsx
+import { useChangeDefaultComponentsLanguage } from '@hortiview/default-components';
+import { AVAILABLE_LANGUAGE_CODES } from '@hortiview/shared-components';
+import { useTranslation } from 'react-i18next';
+
+export const ModuleBase = () => {
+  const { i18n } = useTranslation();
+  /**
+   * needed to handle translations of the default components
+   */
+  useChangeDefaultComponentsLanguage(i18n.language as AVAILABLE_LANGUAGE_CODES);
+
+  return <AnyComponent />;
+};
+```
+
 ## Remarks
 
 This library provides form components using [react-hook-form](https://react-hook-form.com/get-started). When you want to use these components please install `react-hook-form` before using them.
@@ -60,15 +103,15 @@ const { handleSubmit } = formMethods;
 
 Renders a loading spinner. The loading spinner can be customized in size and color. It can also be centered.
 
-```TSX
-import { DefaultLoadingSpinner } from  '@hortiview/default-components';
+```tsx
+import { DefaultLoadingSpinner } from '@hortiview/default-components';
 
-const [isLoading, setIsLoading] = useState(false)
+const [isLoading, setIsLoading] = useState(false);
 
 /** add logic that changes state of isLoading */
 
-if (isLoading) return <DefaultLoadingSpinner />
-return <DefaultComponent />
+if (isLoading) return <DefaultLoadingSpinner />;
+return <DefaultComponent />;
 ```
 
 ### HealthCheckComponents
@@ -79,54 +122,54 @@ If a custom text and type should be displayed please use the shared component `<
 
 #### DataBaseHealthCheck
 
-```TSX
-import { DataBaseHealthCheck } from  '@hortiview/default-components';
+```tsx
+import { DataBaseHealthCheck } from '@hortiview/default-components';
 
-const [isHealthy, setIsHealthy] = useState(false)
+const [isHealthy, setIsHealthy] = useState(false);
 
 /** add logic that changes state of isHealthy */
 
-if (!isHealthy) return <DataBaseHealthCheck />
-return <DefaultComponent />
+if (!isHealthy) return <DataBaseHealthCheck />;
+return <DefaultComponent />;
 ```
 
 #### DataBaseHealthCheck
 
-```TSX
-import { DataBaseHealthCheck } from  '@hortiview/default-components';
+```tsx
+import { DataBaseHealthCheck } from '@hortiview/default-components';
 
-const [isHealthy, setIsHealthy] = useState(false)
+const [isHealthy, setIsHealthy] = useState(false);
 
 /** add logic that changes state of isHealthy */
 
-if (!isHealthy) return <DataBaseHealthCheck />
-return <DefaultComponent />
+if (!isHealthy) return <DataBaseHealthCheck />;
+return <DefaultComponent />;
 ```
 
 #### IotServiceHealthCheck
 
-```TSX
-import { IotServiceHealthCheck } from  '@hortiview/default-components';
+```tsx
+import { IotServiceHealthCheck } from '@hortiview/default-components';
 
-const [isHealthy, setIsHealthy] = useState(false)
+const [isHealthy, setIsHealthy] = useState(false);
 
 /** add logic that changes state of isHealthy */
 
-if (!isHealthy) return <IotServiceHealthCheck />
-return <DefaultComponent />
+if (!isHealthy) return <IotServiceHealthCheck />;
+return <DefaultComponent />;
 ```
 
 #### PlatformHealthCheck
 
-```TSX
-import { PlatformHealthCheck } from  '@hortiview/default-components';
+```tsx
+import { PlatformHealthCheck } from '@hortiview/default-components';
 
-const [isHealthy, setIsHealthy] = useState(false)
+const [isHealthy, setIsHealthy] = useState(false);
 
 /** add logic that changes state of isHealthy */
 
-if (!isHealthy) return <PlatformHealthCheck />
-return <DefaultComponent />
+if (!isHealthy) return <PlatformHealthCheck />;
+return <DefaultComponent />;
 ```
 
 ### ImpatienceLoadingSpinner
@@ -134,13 +177,13 @@ return <DefaultComponent />
 This Loading spinner will automatically change to a specific text, after a certain waiting time, the time is adjustable.
 The default waiting time are 10 seconds.
 
-```TSX
-import { ImpatienceLoadingSpinner } from  '@hortiview/default-components';
+```tsx
+import { ImpatienceLoadingSpinner } from '@hortiview/default-components';
 
-const [isLoading, setIsLoading] = useState(false)
+const [isLoading, setIsLoading] = useState(false);
 
 /** add logic that changes state of isLoading */
 
-if (isLoading) return <ImpatienceLoadingSpinner />
-return <DefaultComponent />
+if (isLoading) return <ImpatienceLoadingSpinner />;
+return <DefaultComponent />;
 ```

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hortiview/default-components",
   "description": "This is a component library that should be used in the HortiView platform and its modules. The components provided here have default translation strings.",
-  "version": "0.0.12022",
+  "version": "0.0.12167",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",