Hello, I wanted to use <a href="https://preline.co/examples/features

Unable to use Preline Examples in Remix App about preline HOT 2 OPEN

dhavalveera commented on June 5, 2024 1

Unable to use Preline Examples in Remix App

from preline.

Comments (2)

AlexBSoft commented on June 5, 2024 2

I was facing the same problem. Current installation steps are invalid for Remix 2.8.1.

I managed to fix the problem:

Install preline npm install preline
Add the path to Preline UI JavaScript files in your tailwind.config.js file.

// tailwind.config.js
module.exports = {
  content: [
      './node_modules/preline/preline.js',
  ],
  plugins: [
      require('preline/plugin'),
  ],
}

Create preline.client.tsx file for example in ~/components folder. (We will use client module):

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;
}

Connect this file in root.tsx:

...
// 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>
  );
}

...

from preline.

bluefire2121 commented on June 5, 2024

`declare global {
interface Window {
HSStaticMethods: IStaticMethods;
}
}
if (typeof window !== "undefined") {
await import('preline/preline');
}

export function Layout({ children }: { children: ReactNode }) {
const location = useLocation();

useEffect(() => {
window.HSStaticMethods.autoInit();
}, [location.pathname]);

return ( ... )
`

Replace typeof window !== "undefined" with typeof document !== "undefined" to handle runtimes outside of Node like Deno. Read the Remix Gotchas for more info.

from preline.

Recommend Projects