Farsi translations for React-Admin, the frontend framework for building admin applications on top of REST/GraphQL services.
npm install --save ra-language-farsiyarn add ra-language-farsiimport 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>Material UI is already supprting RTL, so we can add its support to React Admin using these 2 steps:
- Change
dirproperty tortlin 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');- Change the theme direction (MUI theme direction)
import { defaultTheme } from "react-admin";
import { deepmerge } from "@mui/utils";
const theme = deepmerge(defaultTheme, { direction: "rtl" });- Configure RTL style plugin (MUI doc)
import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";
import { prefixer } from "stylis";
import rtlPlugin from "stylis-plugin-rtl";
// Configure cache
const cacheRtl = createCache({
key: "muirtl",
stylisPlugins: [prefixer, rtlPlugin],
});
const App = () => (
<CacheProvider value={cacheRtl}>
<Admin theme={theme}>
// ...
</Admin>
</CacheProvider>
);- For React-Admin v5, use version 5.x of this package.
- For React-Admin v4, use version 4.x of this package.
- For React-Admin v3, use version 3.x of this package.
- For React-Admin v2, use version 2.x of this package.
- For React-Admin v1, use version 1.x of this package.
This translation is licensed under the BSD Licence, and sponsored by Hamid FzM.