Skip to main content

Directionality

Assemble handles directionality of elements at multiple levels, all of them using either ltr or rtl.

Similarly, all levels share the same default value of ltr when omitted.

Component Level​

Most components accept a dir prop that properly changes the component layout to match the directionality. This allows for a more granular approach.

import { Toggle } from '@/components/simple/base/Toggle/Toggle';
// [...]
<Toggle displayText="Label" dir="rtl" />;

App level​

Using React Context, we can manage the directionality of the whole application (and therefore, all components) through a single entry point.

By default, the DirectionalityProvider will set the directionality based on the current locale. That is, the directionality key of the current dictionary on I18nProvider.

import { I18nProvider, DirectionalityProvider } from '@/context/i18nContext';
<I18nProvider i18n={i18n}>
  <DirectionalityProvider>...</DirectionalityProvider>
</I18nProvider>;

In addition, the useDirectionalityCheck is initialized during the ClientSideInitialization step. This hook also listens to the directionality key, and updates the document.dir accordingly. This translates to the dir attribute on the html tag.

<html dir="rtl"></html>

When a new dictionary is set, and the value of the directionality key changes, it will update the dir attribute accordingly.

If needed, the app can be forced to use a single directionality at all times by passing it to the context directly.

import { I18nProvider, DirectionalityProvider } from '@/context/i18nContext';

<I18nProvider i18n={i18n}>
  <DirectionalityProvider direction="rtl">...</DirectionalityProvider>
</I18nProvider>;