Comments (3)
@hadiranjbar25 I'm not sure what your use-case is. But if you're going to disable the entire plugin you better render the entire page anew too. in other words, you need to unmount React, build jss again and then re-render the entire tree again. because changing this dynamically will leave a lot of dangling states around your app.
https://reactjs.org/docs/react-dom.html#unmountcomponentatnode
it shouldn't be hard to re-render the entire tree. something like this:
const container = document.getElementById('root');
function renderWithRTL(rtl = false) {
ReactDOM.unmountComponentAtNode(container);
const jss = create();
jss.plugins = rtl ? [/* plugins including rtl*/] : [/* plugins without rtl */];
ReactDOM.render(<JssProvider jss={jss}><App></JssProvider>, container);
}
then, you can call renderWithRTL
with true
/false
values to re-render the entire app in rtl/ltr
from jss-rtl.
I want to change the entire style with one click. If it's not possible, your solution seems good. Thank you.
from jss-rtl.
@hadiranjbar25 if you're using a themeing solution or material-ui. you can try changing the theme of material-ui or set the rtl on whatever themeing solution you have. and then further down the tree use the value from the theme to switch the flip property of each stylesheet. if not then this is the best you can get, jss isn't designed to have plugins change initial config dynamically.
P.S. it can still be one click without having to refresh. might just take a couple of microseconds to re-render the whole app, depending on how heavy it is.
from jss-rtl.
Related Issues (11)
- flip property HOT 1
- Source map issue HOT 3
- Performance problem in large code bases because of using delete HOT 1
- Add support for JSS v10 HOT 5
- opt:in not working HOT 4
- rtl not working HOT 2
- Nested selectors with RTL HOT 2
- Why direction: 'ltr' changes to 'rtl'? HOT 1
- RTL with Dark theme is not working
- Computed properties not working HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jss-rtl.