Skip to content

Commit 84c2b11

Browse files
CodedThemesgitbook-bot
CodedThemes
authored and
gitbook-bot
committed
GitBook: [master] 5 pages modified
1 parent d11a2ac commit 84c2b11

File tree

5 files changed

+198
-19
lines changed

5 files changed

+198
-19
lines changed

‎README.md

+14-12
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
---
2-
description: Materially Documentation - ReactJS + Material UI Admin Template
2+
description: Materially Documentation - React.js + Material UI Admin Template
33
---
44

55
# Welcome
66

7-
## ABOUT DOCS
7+
## About
88

99
**Materially** is the most developer-friendly & highly customizable React **Hooks** + Redux with **Material UI**
1010

@@ -14,27 +14,29 @@ We’ve followed the best industry standards to make our product easy, fast & hi
1414

1515
* Material UI
1616
* React Hooks
17-
* Thir-Party Authentication
17+
* 3'rd Party Authentication using JWT, Auth0 & Firebase
1818
* Fully Responsive Layout
19-
* Dashboard, **380+ Widget** Cards
19+
* Dashboard, 50+ Widget Cards
2020
* JSS Powered
21-
* **75+ Pages**
22-
* Live Menu Customize
23-
* 6 months of free support included
24-
* Easy to Build and Setup
25-
* Clear Cut Code style
21+
* 75+ Pages
22+
* 6 months of free technical support
23+
* Easy to customize
24+
* Performance centric code
25+
* RTL Layout
26+
* Localization
2627

27-
## Technical Specification \(Credits 🙏\)
28+
## Technical Specification \(Credits\)
2829

29-
* React Hooks \(**17.0.1**\)
30-
* [Material UI](https://material-ui.com/) \(4.11.0\)
30+
* React Hooks \(17.0.1\)
31+
* [Material UI](https://material-ui.com/) \(4.11.x\)
3132
* SASS with JSS Powered
3233
* \*\*\*\*[Create React App](https://github.com/facebook/create-react-app) ****
3334
* [Redux](https://redux.js.org/)
3435
* [React Router](https://github.com/ReactTraining/react-router)
3536
* [Firebase](https://firebase.google.com/docs/auth)
3637
* [Auth0](https://auth0.com/)
3738
* [JWT](https://jwt.io/)
39+
* [Localization](https://formatjs.io/docs/react-intl/)
3840

3941
## Any Suggestion? OR Feedback
4042

‎SUMMARY.md

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
* [Prerequisites](prerequisites.md)
66
* [Installation](installation.md)
77
* [Authentication](authentication.md)
8+
* [Localization](localization.md)
89
* [File Structure](file-structure.md)
910
* [Routing](routing.md)
1011
* [Template Config](template-config.md)

‎layout-option.md

+4
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@ You can edit this file at **`[ ../src/config.js]`**
1616
{% tab title="Dark Layout" %}
1717
* theme: `dark`
1818
{% endtab %}
19+
20+
{% tab title="RTL" %}
21+
* rtlLayout: `true`
22+
{% endtab %}
1923
{% endtabs %}
2024

2125

‎localization.md

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
---
2+
description: >-
3+
Localization support IE11 & 2 most recent versions of Edge, Chrome, Firefox &
4+
Safari.
5+
---
6+
7+
# Localization
8+
9+
React Intl has a set of React components that provide a declarative way to setup an i18n context and format dates, numbers, and strings for display in a web UI. The components render React elements by building on React Intl's imperative [API](https://formatjs.io/docs/react-intl/api).
10+
11+
## IntlProvider
12+
13+
React Intl uses the provider pattern to scope an i18n context to a tree of components. This allows configuration like the current locale and set of translated strings/messages to be provided at the root of a component tree and made available to the `<Formatted*>` components. This is the same concept as what Flux frameworks like [Redux](http://redux.js.org/) use to provide access to a store within a component tree.
14+
15+
## locale, formats, and messages
16+
17+
The user's current locale and what the app should be rendered in. While `defaultLocale` and `defaultFormats` are for fallbacks or during development and represent the app's default. Notice how there is no, `defaultMessages`, that's because each [Message Descriptor](https://formatjs.io/docs/react-intl/components#message-descriptor) provides a `defaultMessage`
18+
19+
## How does it work?
20+
21+
```text
22+
s
23+
```
24+
25+
1. Add node modules `react-intl` emo
26+
27+
```text
28+
yarn add react-intl / npm install --save react-intl
29+
```
30+
31+
2. Create language file `language-code.json` at directory '**../src/compiled-lang**'.
32+
33+
```text
34+
{
35+
"title": "Multi Language",
36+
"home": "Home",
37+
"change": "Change Language",
38+
"message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiatnulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollitanim id est laborum."
39+
}
40+
```
41+
42+
3. Open file `config.js` file and set language.
43+
44+
```text
45+
export default {
46+
...
47+
i18n: 'en'
48+
...
49+
}
50+
```
51+
52+
4. Open file `App.js` and apply **IntlProvider**
53+
54+
```text
55+
import { IntlProvider } from 'react-intl';
56+
57+
function loadLocaleData(locale) {
58+
switch (locale) {
59+
case 'fr':
60+
return import('./../compiled-lang/fr.json');
61+
case 'ro':
62+
return import('./../compiled-lang/ro.json');
63+
case 'cn':
64+
return import('./../compiled-lang/cn.json');
65+
default:
66+
return import('./../compiled-lang/en.json');
67+
}
68+
}
69+
70+
const App = () => {
71+
const customization = useSelector((state) => state.customization);
72+
const [messages, setMessages] = useState();
73+
74+
useEffect(() => {
75+
loadLocaleData(customization.locale).then(d=>{
76+
setMessages(d.default);
77+
});
78+
}, [customization]);
79+
80+
return (
81+
<React.Fragment>
82+
{ messages && <IntlProvider
83+
locale='fr'
84+
defaultLocale="en"
85+
messages={messages}
86+
>
87+
...
88+
...
89+
...
90+
</IntlProvider> }
91+
</React.Fragment>
92+
);
93+
};
94+
95+
export default App;
96+
97+
```
98+
99+
100+
101+
102+

‎template-config.md

+77-7
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,90 @@
44
You can edit this file at **`[ ../src/config.js ]`**
55
{% endhint %}
66

7-
| **Option** | **Default** | **Data Type** | **Description** |
8-
| :--- | :--- | :--- | :--- |
9-
| **basename** | / | String | `build time set subdomain or path of project directory` |
10-
| **theme** | light | String | `light, dark, nav-dark` |
11-
| **jwt** | - | Object | JSON web token configuration |
12-
| **firebase** | - | Object | `Firebase Authentication config` |
13-
| **auth0** | - | Object | `auth0 login config` |
7+
<table>
8+
<thead>
9+
<tr>
10+
<th style="text-align:left"><b>Option</b>
11+
</th>
12+
<th style="text-align:left"><b>Default</b>
13+
</th>
14+
<th style="text-align:left"><b>Data Type</b>
15+
</th>
16+
<th style="text-align:left"><b>Description</b>
17+
</th>
18+
</tr>
19+
</thead>
20+
<tbody>
21+
<tr>
22+
<td style="text-align:left"><b>basename</b>
23+
</td>
24+
<td style="text-align:left">/</td>
25+
<td style="text-align:left">String</td>
26+
<td style="text-align:left"><code>build time set subdomain or path of project directory</code>
27+
</td>
28+
</tr>
29+
<tr>
30+
<td style="text-align:left"><b>theme</b>
31+
</td>
32+
<td style="text-align:left">light</td>
33+
<td style="text-align:left">String</td>
34+
<td style="text-align:left"><code>light, dark, nav-dark</code>
35+
</td>
36+
</tr>
37+
<tr>
38+
<td style="text-align:left"><b>rtlLayout</b>
39+
</td>
40+
<td style="text-align:left">false</td>
41+
<td style="text-align:left">boolean</td>
42+
<td style="text-align:left"><code>false, true</code>
43+
</td>
44+
</tr>
45+
<tr>
46+
<td style="text-align:left"><b>i18n</b>
47+
</td>
48+
<td style="text-align:left">en</td>
49+
<td style="text-align:left">String</td>
50+
<td style="text-align:left">
51+
<p><code>en</code> - English</p>
52+
<p><code>fr</code> - fran&#xE7;ais</p>
53+
<p><code>ro</code> - Rom&#xE2;n&#x103;</p>
54+
<p><code>cn</code> - &#x4E2D;&#x56FD;&#x4EBA;</p>
55+
</td>
56+
</tr>
57+
<tr>
58+
<td style="text-align:left"><b>jwt</b>
59+
</td>
60+
<td style="text-align:left">-</td>
61+
<td style="text-align:left">Object</td>
62+
<td style="text-align:left">JSON web token configuration</td>
63+
</tr>
64+
<tr>
65+
<td style="text-align:left"><b>firebase</b>
66+
</td>
67+
<td style="text-align:left">-</td>
68+
<td style="text-align:left">Object</td>
69+
<td style="text-align:left"><code>Firebase Authentication config</code>
70+
</td>
71+
</tr>
72+
<tr>
73+
<td style="text-align:left"><b>auth0</b>
74+
</td>
75+
<td style="text-align:left">-</td>
76+
<td style="text-align:left">Object</td>
77+
<td style="text-align:left"><code>auth0 login config</code>
78+
</td>
79+
</tr>
80+
</tbody>
81+
</table>
1482

1583
{% tabs %}
1684
{% tab title="config.js" %}
1785
```javascript
1886
export default {
1987
basename: '/material-ui', // only at build time to set, like ///materially/react/default
2088
theme: 'light', // 'light', 'dark', 'nav-dark'
89+
rtlLayout: false,
90+
i18n: 'en', // 'en', 'fr', 'ro', 'cn'
2191
jwt: {
2292
secret: 'SECRET-KEY',
2393
timeout: '1 days'

0 commit comments

Comments
 (0)