JumboRTL

JumboRTL enables right-to-left layout support by conditionally injecting a Stylis RTL plugin into Emotion's CSS processing pipeline. When the active MUI theme has direction: 'rtl', all CSS properties that have RTL equivalents (padding, margin, float, text-align, etc.) are automatically flipped without any per-component changes.

Import

import { JumboRTL } from '@jumbo/components';

How it works

JumboRTL reads theme.direction from the nearest MUI ThemeProvider context. When the direction is 'rtl', it creates an Emotion cache configured with stylis-plugin-rtl and replaces the default Emotion CacheProvider. All child components then render with RTL-flipped CSS.

// @jumbo/components/JumboRTL/JumboRTL.tsx (simplified)
import createCache from '@emotion/cache';
import { CacheProvider } from '@emotion/react';
import { useTheme } from '@mui/material';
import stylisRTLPlugin from 'stylis-plugin-rtl';
 
export function JumboRTL({ children }: { children: ReactNode }) {
  const theme = useTheme();
 
  if (theme.direction !== 'rtl') {
    return <>{children}</>;
  }
 
  const rtlCache = createCache({
    key: 'muirtl',
    stylisPlugins: [stylisRTLPlugin],
  });
 
  return <CacheProvider value={rtlCache}>{children}</CacheProvider>;
}

Props

Setup

JumboRTL is already mounted in App.tsx. No additional setup is needed:

// src/App.tsx
import { JumboRTL } from '@jumbo/components';
 
function App() {
  return (
    <JumboTheme init={CONFIG.THEME}>
      <JumboRTL>
        {/* rest of the app */}
      </JumboRTL>
    </JumboTheme>
  );
}

Enabling RTL

To switch the entire application to RTL, update the main theme to set direction: 'rtl' and switch the language to Arabic (or any other RTL locale):

// src/themes/main/default.ts
export const mainTheme = {
  direction: 'rtl',
  // ... rest of theme
};

At runtime, the CustomizerSettings drawer provides a locale switcher. Selecting Arabic (ar) updates the i18next language; pair that with a theme direction change for full RTL support.