Unable to use Preline Examples in Remix App #319
Labels
help wanted
Extra attention is needed
Comments
|
I was facing the same problem. Current installation steps are invalid for Remix 2.8.1. I managed to fix the problem:
// tailwind.config.js
module.exports = {
content: [
'./node_modules/preline/preline.js',
],
plugins: [
require('preline/plugin'),
],
}
import {
useLocation,
} from "@remix-run/react";
import { useEffect } from "react";
import { IStaticMethods } from "preline/preline";
declare global {
interface Window {
HSStaticMethods: IStaticMethods;
}
}
export default function PrelineScript() {
const location = useLocation();
useEffect(() => {
import("preline/preline");
}, []);
useEffect(() => {
setTimeout(() => {
window.HSStaticMethods.autoInit();
}, 100);
}, [location.pathname]);
return null;
}
...
// Import at top of file
import PrelineScript from "~/components/preline.client";
export function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
{children}
<ScrollRestoration />
<Scripts />
{/* Add preline script on every page */}
{PrelineScript && <PrelineScript />}
</body>
</html>
);
}
... |
|
`declare global { export function Layout({ children }: { children: ReactNode }) { useEffect(() => { return ( ... ) Replace |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello,
I wanted to use Features Nav in my Remix App, and for that I tried to follow this Installation Steps but unfortunately I was failed to use it.
I am able to render the UI exactly as it's Tailwind CSS, but the functionality, I am not able to make it, can anyone help me where I am doing the mistake?
The text was updated successfully, but these errors were encountered: