Skip to content

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

License

Notifications You must be signed in to change notification settings

developerium/ra-language-arabic

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published