https://github.com/hamidfzm/ra-language-farsi
Farsi translations for react admin
https://github.com/hamidfzm/ra-language-farsi
admin-on-rest farsi react react-admin reactjs translation
Last synced: 2 months ago
JSON representation
Farsi translations for react admin
- Host: GitHub
- URL: https://github.com/hamidfzm/ra-language-farsi
- Owner: hamidfzm
- License: bsd-2-clause
- Created: 2018-08-18T21:46:23.000Z (almost 7 years ago)
- Default Branch: main
- Last Pushed: 2024-12-08T09:53:12.000Z (6 months ago)
- Last Synced: 2025-03-31T17:19:30.626Z (3 months ago)
- Topics: admin-on-rest, farsi, react, react-admin, reactjs, translation
- Language: TypeScript
- Homepage: http://marmelab.com/react-admin
- Size: 508 KB
- Stars: 35
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Farsi Translations for React-Admin
Farsi translations for [React-Admin](https://github.com/marmelab/react-admin), the frontend framework for building admin applications on top of REST/GraphQL services.
[](https://vimeo.com/268958716)
## Installation
### npm
```sh
npm install --save ra-language-farsi
```
### yarn
```sh
yarn add ra-language-farsi
```
## Usage
```js
import farsiMessages from 'ra-language-farsi';
import polyglotI18nProvider from 'ra-i18n-polyglot';
const messages = {
'fa': farsiMessages,
};
const i18nProvider = polyglotI18nProvider(locale => messages[locale], 'fa');
...
```
## 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).
Using HTML (*public/index.html*):
```html
You need to enable JavaScript to run this app.
```
Using CSS style:
```css
body {
direction: rtl;
}
```
Or Pure JS:
```js
document.getElementsByTagName("body")[0].setAttribute('dir', 'rtl');
```
2. Change the theme direction ([MUI theme direction](https://mui.com/material-ui/customization/right-to-left/#2-set-the-theme-direction))
```javascript
import { defaultTheme } from "react-admin";
import { deepmerge } from "@mui/utils";
const theme = deepmerge(defaultTheme, { direction: "rtl" });
```
3. Configure RTL style plugin ([MUI doc](https://mui.com/material-ui/customization/right-to-left/#3-configure-rtl-style-plugin))
```javascript
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 = () => (
// ...
);
```
## Version Compatibility
- 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.
## License
This translation is licensed under the [BSD Licence](LICENSE), and sponsored by [Hamid FzM](https://hamidfzm.com).