Farsi Translations for React-Admin
Farsi translations for React-Admin, the frontend framework for building admin applications on top of REST/GraphQL services.
Installation
npm
npm install --save ra-language-farsi
yarn
yarn add ra-language-farsi
Usage
import farsiMessages from 'ra-language-farsi';
import polyglotI18nProvider from 'ra-i18n-polyglot';
const messages = {
'fa': farsiMessages,
};
const i18nProvider = polyglotI18nProvider(locale => messages[locale], 'fa');
<Admin i18nProvider={i18nProvider}>
...
</Admin>
RTL
Material UI is already supprting RTL, so we can add its support to React Admin using these 2 steps:
- Change
dir
property to rtl
in your root elements (like body).
Using HTML (public/index.html):
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root" dir="rtl"></div>
</body>
Using CSS style:
body {
direction: rtl;
}
Or Pure JS:
document.getElementsByTagName("body")[0].setAttribute('dir', 'rtl');
- Define a theme and set
direction
to rtl
. Also defining an RTL theme might be not enough to flip all React Admin components. So we use jss-rtl plugin to make sure everything works properly.
import { createMuiTheme } from '@material-ui/core/styles';
import {create} from 'jss';
import rtl from 'jss-rtl';
import {StylesProvider, jssPreset} from '@material-ui/core/styles';
const jss = create({plugins: [...jssPreset().plugins, rtl()]});
const theme = createMuiTheme({
direction: 'rtl',
});
const App = () => (
<StylesProvider jss={jss}>
<Admin theme={theme}>
// ...
</Admin>
</StylesProvider>
);
License
This translation is licensed under the BSD Licence, and sponsored by Hamid FzM.