I am trying to convert the Html theme to React since i could not really get a good grasp of the code. Everything seems to be working but I am having issues with the drop down and other triggers. What do I need to do to get going?
Converting an HTML theme to React can be tricky, especially with dropdowns and triggers. Here’s a concise guide to get you on track:
Fix Dropdowns and Triggers:
State Management: Use useState to control dropdown visibility:
jsx
Copy code
const [isOpen, setIsOpen] = useState(false);
const toggleDropdown = () => setIsOpen(!isOpen);
Event Handling: Replace inline handlers with React events (onClick, onChange).
Dependencies: Use React-compatible libraries like react-bootstrap for prebuilt components.
Handle Outside Clicks: Add a useEffect with event listeners to close dropdowns when clicking outside.
CSS: Ensure all styles from the original theme are correctly imported.
my unisa
Hi,
Could you please create different threads for different issues, cause it's hard to maintain them? Thanks in advance.
About the issue related to dropdown issues, could you please check this thread: https://devs.keenthemes.com/question/rtk-query-in-react. Looks you have the same issue.
Regards,
Keenthemes support
You did not get our question:
I am not using the React Demo Version Developed By You.
I am transforming the HTML version into a React version but we noticed that the toggles starting with "kt" eg. "kt_aside_toggle" are not working. However the toggles with starting with "data" eg. "data-bs-toggle" are working. What's the possible work around for this kind of scenario.
Note: Your React Implementation is Quite complex. Trying to understand your implementation might take me a longer time.
Hi,
Cause of that I suggested checking our code. For React version we have react/demo1/src/_metronic/assets/ts
folder with kt
components (which is built for HTML version, but we re-use them in our React app also (Initialization of kt
components: react/demo1/src/_metronic/layout/MasterInit.tsx
).
Regards,
Keenthemes support
Some other Details:
I can not scroll feature seems to be disenabled on the dark aside bar. I have followed the html tutorial but I did not see the instructor do something out of the ordinary to make that work. So I am wondering where the issue might be.
Hi, where you able to solve this problem ?
I am having a similar issue !