ra-language-arabic

Arabic translations for React-Admin, the frontend framework for building admin applications on top of REST/GraphQL services.

Usage no npm install needed!

<script type="module">
  import raLanguageArabic from 'https://cdn.skypack.dev/ra-language-arabic';
</script>

README

Arabic Translations for React-Admin

Arabic translations for React-Admin, the frontend framework for building admin applications on top of REST/GraphQL services.

react-admin-demo

Installation

npm install --save ra-language-arabic

Usage

import ArabicMessages from 'ra-language-arabic';

const messages = {
    'ar': ArabicMessages,
};

const i18nProvider = locale => messages[locale];

<Admin locale="ar" i18nProvider={i18nProvider}>
  ...
</Admin>

RTL

Material UI is already supprting RTL, so we can add its support to react admin using these 2 steps:

  1. Change dir property to rtl in your root elements (like body). You can also connect this property to redux.
  2. Define a theme and set direction to rtl.
import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  direction: 'rtl',
});

const App = () => (
    <Admin theme={theme}>
        // ...
    </Admin>
);

public/index.html

<body>
<noscript>
  You need to enable JavaScript to run this app.
</noscript>
<div id="root" dir="rtl"></div>
</body>
  1. Add jss-rtl.

You need this JSS plugin to flip the styles: jss-rtl.

npm install jss-rtl

Having installed the plugin in your project, Material-UI components still require it to be loaded by the jss instance, as described below. Internally, withStyles is using this JSS plugin when direction: 'rtl' is set on the theme. Head to the plugin README to learn more about it.

Once you have created a new JSS instance with the plugin, you need to make it available to all the components in the component tree. The StylesProvider component enables this:

import { create } from 'jss';
import rtl from 'jss-rtl';
import { StylesProvider, jssPreset } from '@material-ui/core/styles';

// Configure JSS
const jss = create({ plugins: [...jssPreset().plugins, rtl()] });

function RTL(props) {
  return (
    <StylesProvider jss={jss}>
      {props.children}
    </StylesProvider>
  );
}

License

This translation is licensed under the BSD Licence, and sponsored by Vahid Kheradmand.