Webpack + react RTL?

1

How to enable auto RTL based on the device locale, for example, en-US will receive LTR and he-IL will receive RTL respectively.

How to achieve such a thing with Framework 7?

2

RTL or LTR use different stylesheets, you need to manually detect user language and include LTR (default) or RTL framework7 CSS file

3

But if I want to allow the user to pick language and then I have to swipe those styles?

4

Then you need in the same way dynamically remove and add relevant stylesheet. But such behavior is not really supported

5

is there any solution for this?
Not necessarily changing style sheet at runtime, but loading the corresponding style sheet at application start would be great.

6

I am doing this by refreshing the whole app, using location.reload()

7

I dont mind refreshing the whole app, but how you load one of the css files based on condition? could you share a code snippet? have you done any changes to your configuration?
Any help is really appreciated

8

Use dynamic import:

if (language=="something") {
 import('./path/to/something')
} else ...
9

@raz Thank you for your reply, I am doing the same thing but for some reason it breaks on production, will test this on a blank project

1 Like
10

Make sure that in production you have the same settings you have in your development environment.

Using dynamic imports requires to
import 'babel-polyfill'
(and install it ofcource, google it)

This should be done on the first line of the entry file of your package manager (Webpack).

You better make sure this functionality works on a POC (just a blank new project) and after you are familiar with how things are working you can propagate them to your main project.

11

This works!
//app.js
var _lang = ‘ar’;//use your logic
(async () => {
if (_lang == ‘en’) {
await import(‘framework7/framework7-bundle.min.css’);
await import(’…/css/app.css’);
}else{
await import(‘framework7/framework7-bundle-rtl.min.css’);
await import(’…/css/app.css’);
}
})();

1 Like