Repository navigation
docs: Confusing React Documentation #146
Description
On which page do you see this issue?
https://flyonui.com/docs/framework-integrations/react/
Describe the issue
The examples on this page are very confusing. We have a mention of jQuery which is not supposed to be used together with React at all but what I really struggle to understand is the following snippet:
async function loadFlyonUI() {
return import('flyonui/flyonui');
}
...
function App() {
const location = useLocation();
useEffect(() => {
const initFlyonUI = async () => {
await loadFlyonUI();
};
initFlyonUI();
}, []);
useEffect(() => {
setTimeout(() => {
if (
window.HSStaticMethods &&
typeof window.HSStaticMethods.autoInit === 'function'
) {
window.HSStaticMethods.autoInit();
}
}, 100);
}, [location.pathname]);
return (
...
);
}
}What probably should be added as information:
- Why do we need to use a dynamic import for
flyonui/flyonuiinside auseEffectinstead of a static import at the top of the file? - Why do we need a second
useEffectwhich runs anautoInit()method depending on the pathname? This makes no sense to me because in a SPA we usually initialize the app only once and not on every page change. I don't understand what the Flyonui components have to do with the route path.
Overall the examples in this page don't follow React best practices and feel weird to use so any clarifications would be better.
What browsers are you seeing the problem on?
No response
Activity
github-actions commentedon Jun 15, 2026
Thank you for your support in helping us improve FlyonUI!
We’ve received your submission and will respond within few business days. Our team handles issues one at a time, and we’ll be reviewing yours as soon as possible.
In the meantime, any additional details or a reproducible example would be greatly appreciated and will help us resolve the issue more efficiently.
Thank you for your patience and understanding!
alex-vukov commentedon Jun 16, 2026
Here is a suggested edit for the react document. At least that's how I use the library:
OmkarOza commentedon Jun 24, 2026
Hi @alex-vukov,
First, we apologize for the delayed response, and thank you for your patience and for taking the time to share such detailed feedback.
Regarding jQuery, it is mentioned only as an optional third-party dependency. It is required by the DataTables JavaScript library for the DataTables component and is not a general requirement for using FlyonUI with React. You can also use a React-focused alternative, such as TanStack Table, if that better suits your project.
The
autoInit()method is called after route changes because FlyonUI is not a pure React component library like MUI. Its interactive JavaScript components work by scanning and initializing DOM elements after they have been rendered. In a single-page application, navigation can introduce new elements without reloading the page, so those elements may need to be initialized after each route change.If your project uses only CSS-based FlyonUI components and does not use interactive JavaScript components, you can skip the JavaScript import and the
autoInit()step entirely.We agree that the current documentation could explain these points more clearly. We will review your proposed changes and consider refactoring the React integration guide to provide clearer guidance on static versus dynamic imports, route-based initialization, and component-level initialization.
Thank you again for your thoughtful contribution.
Best regards