search

alitaheri / jss-rtl

Flip styles using rtl-css-js
MIT License
83 stars 5 forks source link

Disable plugin dynamically #9

Closed ghost closed 5 years ago

ghost commented 5 years ago

Can I disable and enable the plugin dynamically? I tried this command but it didn't work.

jss.use(rtl({ enabled: false }));

alitaheri commented 5 years ago

@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

ghost commented 5 years ago

I want to change the entire style with one click. If it's not possible, your solution seems good. Thank you.

alitaheri commented 5 years ago

@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.