Couple of general questions😅

Hey there,
My work recently bought Version 8(React) and i’m new to metronic.
I wanted to know couple of things that I couldn’t find an answer to them in your documentation.

1. Your components are reusable?
For example I tried to copy the Language button that located inside the User actions to the AuthPage but I saw that the component Languages was designed only for a menu layout.
So I was needed to do some conditional rendering with the boolean Props isBtn to hide the Languages string inside the component.
I also wrapped the Languages component with a div that have menu classname so I could enable hover on the Language button.
My question is: Was it the best approach and if I was missing some reusable logic I could use?

2. You guys got this layout: https://preview.keenthemes.com/metronic/demo1/custom/pages/login/classic/login-1.html
I want to implement the design on my AuthPage but I saw in the DOM that I don’t have the same css properties for this layout.
Is it possible to know how can I design it with my current (V8) css files and make it responsive like the demo?

3. About the react-query library you guys used, Is it to ‘replace?’ redux, I might need a global state in the next steps and I’m wondering if I can and should connect redux for global state or you recommend to stay with react-query?

Thank you very much for reading,
Hope to get some insights.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

Hi,

1) Metronic is the UI Theme, not UI library. We just prepared our Layout based on our Design system (HTML markup and styles) .
For example Languages component: it's just an example, of how it could be implemented, without any re-usable logic, cause this component can be implemented by 100 other methods and using other 100 3-d party libraries (each user should decide the best solution for his business needs himself).

2) Your link is related to the Metronic 7 (not to the Metronic 8), it can't be used in the version Metronic 8.

3) The question is, which state do you need in your application. RQ is a server-state library, Redux is a client-state (more details are here: https://react-query.tanstack.com/guides/does-this-replace-client-state). We can't recommend you to use/not use Redux. We decided to use RQ together with the React Context API instead of using Redux+Saga/Thunk. It helped to avoid Redux boilerplate and write more understandable and clean code (But it's only our experience, it's not the source of truth).

Regards,
Keenthemes support

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(