53 comments found.
I bought wrong version of this 
please help. i need react. i really couldnt understand your website, tried hard to find react version. mainpage on your website leads to bootstrap version
Hi,
You may repurchase the react template and submit the refund request.
Best Regards, Sean.
Subject: Unity WebGL reload issue when navigating pages in React
Message:
Hello,
I have integrated Unity WebGL inside my React project on the /global-map page. The problem is that when I navigate between pages (for example from /home to /global-map and then back), the Unity WebGL instance reloads every time.
My requirement is:
Unity WebGL should be initialized only once when the app loads.
Even if I navigate between pages, the WebGL instance should remain loaded in memory and not restart.
It should not re-render or reload again unless the whole application is refreshed.
Could you please guide me how to keep Unity WebGL persistent across page navigation in React Router? Should I mount it globally inside App.js and share it across routes, or is there a recommended way to achieve this in your template?
Thanks in advance!
page: global-map.js code : import { useState, useEffect } from ‘react’; import { Card, CardHeader, CardBody, CardExpandToggler } from ’./../../components/card/card.jsx’; // import Unity from ’../../components/Unity/Unity’; import style from ”./module/loader.module.css”; import CyberIMG from ”../../assets/cyber-bro.png” function GlobalMap({ unity}) { const [loading, setLoading] = useState(true); }
useEffect(() => {
const timer = setTimeout(() => {
setLoading(false);
}, 3000);
}, []);return () => clearTimeout(timer);return (
Global Map page header description goes here...
<Card>
<CardHeader className="fw-bold small d-flex justify-content-between"> Tashkent region... <CardExpandToggler /></CardHeader>
<CardBody className={`${style['main-father']} d-flex align-items-stretch unity-web-card `} style={{ height: 'auto', padding: 0 }}>
{
loading ? <main className={style['main-loader-unity']}>
</main> : ""
}
{unity}
</CardBody>
</Card>
)export default GlobalMap;
Hi,
By default, React Router will unmount the component when you leave /global-map, so your Unity instance is destroyed and recreated when you come back.
To fix it, you need to make the Unity WebGL instance global/persistent, so it isn’t tied to just one route’s lifecycle.
You may try:
Place your <Unity /> component in App.js (or a top-level layout component) so it only mounts once when the app loads.
then, in your GlobalMap.js, you just display or hide the Unity container instead of re-mounting it.
Best Regards, Sean.
Hello, I purchased the wrong framework version. Will you accept my return? I would like to purchase the Next.js version again.
Hi,
You may submit a refund request and we will proceed for the refund.
Best Regards, Sean.
terribly sorry, i bought the html version by mistake and i need the react version of HUD,
Hi,
You may purchase the React version first and submit a refund request for HTML version.
Best Regards, Sean.
Can you provide a version without all these vulnerabilities ?
https://pastebin.com/U5WRenUk https://pastebin.com/TVb4pcJdHi,
You can safely ignore these vulnerability warnings.
For example, React relies on react-scripts.js to run the npm run start command. However, the main vulnerability warnings appear when running npm install due to dependencies within react-scripts.
Here’s an example of the dependency chain:
└─┬ react-scripts@5.0.1 └─┬ workbox-webpack-plugin@6.6.0 └─┬ workbox-build@6.6.0 ├─┬ @rollup/plugin-replace@2.4.2 │ └─┬ magic-string@0.25.9 │ └── sourcemap-codec@1.4.8 └── rollup-plugin-terser@7.0.2
Since these warnings originate from indirect dependencies, they do not necessarily pose an immediate security risk.
Best regards, Sean.
Hi Sean, I intend to buy the product but I need to work with TypeScript, Vite and Tailwind. Can you help me with the project? How much does it cost? Thank you.
Hi,
Thank you for your interest in our product. However, we’re not available for freelance work at the moment. We recommend checking the documentation for integrating TypeScript, Vite, and Tailwind into your project, or seeking assistance from a developer specializing in those technologies.
Best regards, Sean
Hello Sean, thanks for the answer, but what I would like to know is if it is possible to do this conversion, if so I will hire some devs to help in the process, I just don’t want to buy and I can’t follow the same, we just want to use the layout base, not the entire project already done by you, thanks again.
Hi,
Yes, you can definitely hire a developer to handle the conversion process. However, we’re not available for any customization services at this time. Hope you understand, and let us know if there’s anything else we can help with!
Best Regards, Sean.
thank you, let`s go…
We are developing a subscription-based product that includes multiple user access and restriction features. Should we proceed with a regular or advanced license for this product?
Hi,
For subscription based product, you might need to purchase an extended license. For more information, you may refer to envato license details page.
https://themeforest.net/licenses/standardBest Regards, Sean.
Can I set background image according to us?
Hi,
Yes, you just need to replace the default image with one of the same name in the /src/scss/images/cover-dark.jpg directory.
Best regards, Sean
In the above link will we get only admin panel or do we get user panel also? I have requirement of both admin and user panel
Hi,
Please note that this template is designed for an admin panel but can also be configured for a user panel. Keep in mind that the template primarily focuses on UX/UI and does not include backend integration with the database. You will need to set up your own backend configuration to make the template functional on your end.
Best regards, Sean
Hi Team,
We have a requirement for user & Admin dashboard for a Quantum computing project. Also desirable that it is compatible with React JS.
Let us know how to get our clarifications sorted out.
Early revert will be much desired.
Regards
Hi,
Please refer to our online documentation to check the file structure and syntax before purchasing the template.
https://seantheme.com/hud-react/documentation/Best regards, Sean
Please refund the author, this theme is terrible, the code is freakish
Request a refund, this theme is really not useful
Hi,
Can you provide us the error / bugs / code that you mention in previous comment that cause any issue on your side?
p.s due to envato policy, we are not able to proceed with refund once the items has been downloaded and without a valid reason.
Best Regards, Sean.
You can try to use pnpm or yarn to install it and see if it works. A lot of invalid dependencies are built.
In addition, I actually saw ancient code in the React code, such as MODAL. I don’t know which project this low-quality code can be used in.
If I don’t download the code, how can I test it and find the problem?
Hi,
Did you follow the documentation by running the npm install command instead of pnpm or yarn install? This is important because this template has been built and tested using npm install. Please do not use other installation methods, as they may cause issues.
Additionally, could you please provide a screenshot of the error message (such as “invalid dependencies” or “ancient code such as MODAL”)? You can upload the screenshot to a site like https://imgbb.com/ and share the link with us here.
P.S. Due to Envato’s policy, we cannot accept refunds or allow code testing before purchase. This policy ensures fairness to all customers who have purchased our template.
Best Regards, Sean.
Hello,
I am running into issues with getting this template setup. I have the latest node/npm/python etc installed. I get many errors when running npm install—force. I have tried using the updated package.json that I found in previous comments with no success. I have deleted the node_modules directory and ran npm cache clear—force as well all with no success. please see the below log and advise.
https://pastebin.com/csDVDveHHi,
Make sure you are using the latest stable version of node js which is v20+ BUT not v22+ which is not supported in React 18 yet.
Best Regards, Sean.
I am following your instructions even on a new device all clean installs of code node etc and i am still running into issues with the npm install—force command. What can be done to get this up and running asap or get refunded?
Hi,
Can you share which version of nodejs you are using right now?
p.s if you are using nodejs v22, no matter which react project you are using, it is definitely not able to run on your localhost.
Best Regards, Sean.
node-v20.15.1-x64.msi is the installer I used. It is the current LTS build.
Hi
Can you share the error message that its shown in your terminal / command prompt?
Best Regards, Sean.
theres a slew of them. its too long for pastebin. Can I email you the install logs?
Hi,
Yeah, you may inbox us via https://themeforest.net/user/seantheme/portfolio then you will be able to reach our support email.Besides that, did you remove the node_modules folder and package-lock.json and re-run the npm install command? This is because we just tested on latest version of node js v20.15.1 and it is working fine on our side with npm install command.
Best Regards, Sean.
Yes they have been removed. I have sent you the latest log.
Is there an example of using a text link to open another tab in your demo?
For example, #tab01 is open. The content text has a link to #tab03. When clicking on the link, it opens #tab03. Not deep linking. Just open #tab03. I know how to do it in vanilla HTML, CSS, and JS. There has got to be an easy way to do it in REACT right? GPT doesn’t even get it right! lol
Hi,
If you wish to open the tab by using the hash from link, you need to have an attribute data-bs-toggle=”tab” in order to do so.
e.g
<a href=”#tab03” data-bs-toggle=”tab”></a>
Best Regards, Sean.
Thank you. Added the above to the link to open #tab3 and got the following error…
``` TypeError: Illegal invocation at Tab._getChildren (tab.js:180:1) at Tab._getActiveElem (tab.js:184:1) at Tab.show (tab.js:87:1) at HTMLAnchorElement.<anonymous> (tab.js:298:1) at HTMLDocument.handler (event-handler.js:118:1)
```
I am using the tabs on this page from your template. https://seantheme.com/hud-react/pages/orders
Hi,
Did you include the bootstrap into your project? The code for importing the bootstrap can be found via /src/index.js LINE 8
Best Regards, Sean.
Yes. Literal copy of your full working React template, including supporting files. The tabs otherwise work as the template works, using bootstrap tabs. Deep linking is fairly common. Fortunately I don’t need to go that far. Just need to open an existing tab.
Hi,
In that case, you may need to implement custom logic to manage the activation and visibility of tabs. Here are the steps to achieve this:
1. trigger click on the tab link
2. load and change the content needed for the tab click
3. do some action to active / hide the tabs (e.g set condition to append / remove the active + show css class from the tab pane and tab link.)
p.s you may refer to bootstrap documentation for which class is needed for active tab. https://getbootstrap.com/docs/5.3/components/navs-tabs/#tabsBest Regards, Sean.
Hey there! Great theme! Using the React version.
Your demo at the below URL does not include the code sample for the shown “List widget” code for “WITH SETTINGS”. Please advise. Thanks!
https://preview.themeforest.net/item/hud-react-18-bootstrap-admin-template/full_screen_preview/42252040Hi,
Sorry for the late reply. You may refer to the following code for list widget.
https://pastebin.com/AZJPM2igBest Regards, Sean.
Unfortunately my company blocks pastbin.com. Do you have an alternative? Like codepen.io/?
I see that you have a lot of structural code in external JSON files in the template. For example, “widget-code-1.json” in `public/assets/data/chart`. I have put static JSON files in `public/assets/data/data.json`, but I am getting null. Do you have the same to simply call external JSON data in the template? Thanks!
Hi,
For your information, all those json file is for demo site only. The best practice should be create an api for your app to pull the data from your database.
Best Regards, Sean.
Thank you for getting back to me so quickly. I greatly appreciate your support.
Agreed. But unfortunately, I am on a team and do not have access to the API. I am using “orders.js” as a SPA to emulate how the UI will look/behave with a legacy static copy of the JSON. It sees and loads the static JSON but the data itself is null. So, the order.js table/tr/td are rendering but the td itself is empty. No errors. So I am seeing how the code in place in the template calls static JSON that is obviously more reliable than what I am doing.
Thank again!
Hi,
You may refer to the file like /src/pages/ui/bootstrap.js (LINE: 21) for how to fetch the json data from the file.
Best Regards, Sean.
Ah. OK. Thank you!
Do I need the “html” since there is no HTML in the JSON?
So, it would be…
fetch(’/assets/data/data.json’).then(function (response) { return response.text(); });
Hi,
It depends on what you want to do with the data fetched from json file. Normally people will assign the fetched data to a variable that pass into your html to render the html code.
Best Regards, Sean.
please let me know is there any Loader for page ?
Hi,
There is no loader for the page. BUT you can create your own page loader easily by using bootstrap spinner with flexbox.
https://getbootstrap.com/docs/5.3/components/spinners/#aboutBest Regards, Sean.
I see that you have an upload dialogue that displays the name of the file uploaded. Very nice!
I will be using that. I will be providing drag and drop functionality as well. Do you have a preference as to which modules to use that best fit with the template and theme?
Hi,
You may refer to some article / post that how to create the drag and drop upload component.
https://medium.com/@dprincecoder/creating-a-drag-and-drop-file-upload-component-in-react-a-step-by-step-guide-4d93b6cc21e0Best Regards, Sean.
Iconify is not working. Looks like it is calling out for and not finding solar.json. Company firewall prevents connections. Offline version?
Hi,
For offline version, you may try to download the icon as svg img from iconify.
Best Regards, Sean.
There seems to be an issue with the demo site.
https://seantheme.com/hud-react/dashboardHi,
Thank you for your comment and report. We have fixed our demo site issue.
Best Regards, Sean.
I was able to get the JSON file it is reaching out for. Would it fix things across the board if I changed the URL to a local instance of the JSON file?
Hi,
The downloaded version should be pointing to the local json file instead of the live site json file.
Best Regards, Sean.
How to enable transitions in the template? I don’t see anything in the documentation.
Hi,
May i know what transitions that you mention?
Best Regards, Sean.
Setting `appSidebarNone: true` removes the sidebar but does not remove the sidebar toggle.
Hi,
You may set the appSidebarCollapsed: false setting from the page as well.
Best Regards, Sean.
Your demo menus fade in/out, tabs fade in/out, accordions slide open/close.
Mine does not. Maybe I don’t launch the app correctly? The browser dev panel shows body:not(app-init) * {transition: none !important; animation: none !important;}
Hi,
You may add the following code within the useEffect function for /src/app.jsx
document.querySelector(‘body’).classList.add(‘app-init’);
Best Regards, Sean.
OK. That line was in the sidebar.jsx, but since I changed the sidebar option to nix the sidebar, it’s not taking affect. So copy it to app.jsx… totally worked! Gracias!
“You may set the appSidebarCollapsed: false setting from the page as well.”
I turned off the sidebar but the sidebar toggle is still there.
I have set appSidebarNone: true, appSidebarCollapsed: true in app.jsx and context.setAppSidebarNone(false) in top-nav.js and the sidebar toggle button .desktop-toggler is still there.
I can use CSS to hide it?
Hi,
Yeah, you are able to do so e.g <style type=”text/css”> .app-without-sidebar .app-header .desktop-toggler { display: none; } </style>
Best Regards, Sean.
