HortiView Default Components¶

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.

Please use those components to ensure that translations are the same for all modules.

Install¶

# for npm users
npm i @hortiview/default-components

# for yarn fans
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:

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:

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 />
};

Prerequisites¶

This library is based on a public version of Bayer's Element component library.

Use yarn add @element-public/react-components @element-public/themes or npm i @element-public/react-components @element-public/themes to add the packages to your solution.

Remarks¶

This library provides form components using react-hook-form. When you want to use these components please install react-hook-form before using them.

Available components¶

Please checkout the @hortiview/default-components NPM page for a detailed and up-to-date overview of the components.

Changelog¶

To see the newest changes, checkout our Changelog