I am trying to use Helmet to load javascript files but it does not seem to work. I tried various paths like './vendor','../vendor' '/vendor' and it did not work. Here is what I have. Thanks a lot.
function DashboardLayout(props) {
return (
<Fragment>
<Helmet>
<title>Dashboard</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<meta name="robots" content="noindex" />
<script src="./vendor/jquery/jquery.min.js" type="text/javascript" />
<script src="./vendor/bootstrap/js/bootstrap.bundle.min.js" type="text/javascript" />
<script src="./vendor/jquery-easing/jquery.easing.min.js" type="text/javascript" />
<script src="./js/sb-admin-2.min.js" type="text/javascript" />
</Helmet>
{props.children}
</Fragment>
);
}
and the folder directories.
Related
I am new to web development and have been practicing React by building a site. I need to embed multiple JS scripts to display 360 tours on the site. But can't get it to work. When I use the JS script embed it does not appear on site.
I have included the script in the public/index.html head as follow:
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<script
src="https://static.kuula.io/embed.js"
data-kuula="https://kuula.co/share/collection/7FN30?logo=-1&info=0&fs=1&vr=1&zoom=1&initload=0&thumbs=1"
data-css="ku-embed">
</script>
<title>React App</title>
</head>
Here is my code within the component:
import React from 'react';
import "./portfolio.css";
import { CTA } from '../../components';
const Portfolio = () => {
return (
<div className='portfolio' id="portfolio">
<div className="portfolio-heading">
<h1>Examples</h1>
<p>Experience virtual tours from the customer perspective</p>
</div>
<div className="portfolio-cards">
<div className="card-container-card">
<div className="card-container-card-img">
<script
src="https://static.kuula.io/embed.js"
data-kuula="https://kuula.co/share/collection/7FN30?logo=-1&info=0&fs=1&vr=1&zoom=1&initload=0&thumbs=1"
data-css="ku-embed">
</script>
</div>
<div className="card-container-card-title">
<p>Revel x Plato</p>
</div>
</div>
</div>
< CTA />
</div>
)
}
export default Portfolio
I am running Reactjs with vite, When I am trying to start my app with network IP I am getting the following error
I am getting the following error when I am trying to start the app with host: localhost
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Asset Scanner</title>
<script
src="https://cdn.socket.io/4.2.0/socket.io.min.js"
integrity="sha384-PiBR5S00EtOj2Lto9Uu81cmoyZqR57XcOna1oAuVuIEjzj0wpqDVfD0JA9eXlRsj"
crossorigin="anonymous"
></script>
</head>
<body>
<div id="root"></div>
<div id="modals"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom'
import App from '##/App'
import { loadCSSVariables } from './common/utils/cssVariables'
loadCSSVariables().then(() => {
ReactDOM.render(<App />, document.getElementById('root'))
})
i'm new to react JS i wanted to make a popup modal when i click on some button but i want it to position itself close to that button that i clicked ! i used the portal method but that won't position it close to the button so you will have to position it your self but it won't be a good practice ! so i there any other way to do it ? ! and also when the modal popup i want to close when i click on anywhere on the screen not including it self !
PORTAL METHOD :
import React, { Fragment } from "react";
import ReactDOM from "react-dom";
const Popup = (props) => {
if (!props.open) {
return null;
}
return (
<Fragment>
{ReactDOM.createPortal(
<div
className="popupContainer"
style={{ position: "absolute", top: 0 }}
>
<h2>ghhhh</h2>
</div>,
document.getElementById("popup")
)}
</Fragment>
);
};
export default Popup;
<div className="btnContainer">
<button
className="btn btn-primary"
onClick={() => {
setOpen(true);
}}
>
Show modal
</button>
<Popup open={open} />
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React Redux App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="popup"></div>
</body>
</html>
I was trying to use a template of bootstrap, CSS files are imported properly by I'm not able to import JS. I came to know that in Next Js you can import them in useEffect hook. But still, it gives an error that the script not found. Here is my code,
import Head from 'next/head';
import '../styles/globals.css';
import { useEffect } from 'react';
function MyApp({ Component, pageProps }) {
useEffect(() => {
import("../public/lib/js/jquery-3.3.1.min.js");
import("../public/lib/js/bootstrap.min.js");
import("../public/lib/js/jquery.nice-select.min.js");
import("../public/lib/js/jquery-ui.min.js");
import("../public/lib/js/jquery.slicknav.js");
import("../public/lib/js/mixitup.min.js");
import("../public/lib/js/owl.carousel.min.js");
import("../public/lib/js/main.js");
}, []);
return (
<>
<Head>
<meta charset="UTF-8"/>
<meta name="keywords" content="Ogani, unica, creative, html"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
{/* Font */}
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght#200;300;400;600;900&display=swap" rel="stylesheet"/>
{/* CSS */}
<link rel="stylesheet" href="lib/css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="lib/css/font-awesome.min.css" type="text/css"/>
<link rel="stylesheet" href="lib/css/elegant-icons.css" type="text/css"/>
<link rel="stylesheet" href="lib/css/nice-select.css" type="text/css"/>
<link rel="stylesheet" href="lib/css/jquery-ui.min.css" type="text/css"/>
<link rel="stylesheet" href="lib/css/owl.carousel.min.css" type="text/css"/>
<link rel="stylesheet" href="lib/css/slicknav.min.css" type="text/css"/>
<link rel="stylesheet" href="lib/css/style.css" type="text/css"/>
</Head>
<Component {...pageProps} />
</>
);
}
export default MyApp;
Here is my directory structure,
Directory Structure
After the suggestion is used _document.js inside the pages directory to include local scripts but still they aren't included when the page is rendered.
pages/_document.js code is below,
import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'
export default function Document() {
return (
<Html>
<Head>
{/* Site Tag */}
<Script src="lib/js/jquery-3.3.1.min.js" strategy="beforeInteractive"/>
<Script src="lib/js/bootstrap.min.js" strategy="beforeInteractive"/>
<Script src="lib/js/jquery.nice-select.min.js" strategy="beforeInteractive"/>
<Script src="lib/js/jquery-ui.min.js" strategy="beforeInteractive"/>
<Script src="lib/js/jquery.slicknav.js" strategy="beforeInteractive"/>
<Script src="lib/js/mixitup.min.js" strategy="beforeInteractive"/>
<Script src="lib/js/owl.carousel.min.js" strategy="beforeInteractive"/>
<Script src="lib/js/main.js" strategy="beforeInteractive" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
Update:
Changed beforeInteractive to lazyOnload. You may also use afterInteractive.
Say you have a local script file: myscript.js that you are trying to include in your NextJS project, to include it:
Place the script file in your /public folder and
In your page component add:
Inside page component:
import Script from 'next/script'
export default function Document() {
return (
<div>
{/* Other stuff */}
<Script
src="myscript.js"
strategy="lazyOnload"
/>
</div>
)
}
NextJS will know to look for scripts referenced without a URL prefix like https in the public folder.
Learn more about the <Script> component and other load strategys here:
https://nextjs.org/docs/basic-features/script#overview and https://nextjs.org/docs/api-reference/next/script
I want my nextjs app to have a different favicon based on the route.
This is the working application where I want to implement this. I want the favicon to become the countries flag whenever someone goes to that countries page.
I have the following code in my react components Head tag:
<Head>
<title>{country.name} | {country.subregion}</title>
<link rel="icon" href={country.flag} />
</Head>
This works sometimes but most of the times the favicon is not updated or the previous favicon stays.
One issue that I had was that your <link> element must be a direct child of next.js's <Head> element. This means you cannot have a <Favicon> React element that internally renders a <link> element. Instead you should call your <Favicon {...props}> React element as a function as shown below:
<Head>
{Favicon({...props})}
</Head>
Something similar happened to me.
Thats my solution.
In href, navigate to file folder.
import Head from 'next/head';
export default function MyPage() {
return (
<>
<Head >
<link rel="icon" type="image/x-icon" href="../../file.svg" />
</Head>
<div>Something...</div>
</>
)
}
What you can do is catching the pathname on the client side in a favicon component that just swaps the favicon src based on the route. what you would end up with would be kind like the following:
app:
import { useRouter } from "next/router";
import Favicons from "../components/favicons";
const App = ({ Component, pageProps }) => {
const router = useRouter();
return (
<>
<Head>
<meta charSet="utf-8" />
<Favicons currentRoute={router.pathname} />
</Head>
<Component {...pageProps} />
</>
);
};
and then in the favicons component something like this:
const Favicons = (currentRoute) => {
switch (currentRoute) {
case "variant-1":
return (
<>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/favicons/[version]/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicons/[version]/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicons/[version]/favicon-16x16.png"
/>
<link rel="manifest" href="/favicons/[version]/site.webmanifest" />
<link rel="shortcut icon" href="/favicons/[version]/favicon.ico" />
<meta name="msapplication-TileColor" content="#603cba" />
<meta name="msapplication-config" content="/favicons/[version]/browserconfig.xml" />
<meta name="theme-color" content="#ffffff" />
</>
);
case "variant-2":
return (
<>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/favicons/[version]/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicons/[version]/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicons/[version]/favicon-16x16.png"
/>
<link rel="manifest" href="/favicons/[version]/site.webmanifest" />
<link rel="shortcut icon" href="/favicons/[version]/favicon.ico" />
<meta name="msapplication-TileColor" content="#603cba" />
<meta name="msapplication-config" content="/favicons/[version]/browserconfig.xml" />
<meta name="theme-color" content="#ffffff" />
</>
);
default:
return (
<>
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png" />
<link rel="manifest" href="/favicons/site.webmanifest" />
<link rel="shortcut icon" href="/favicons/favicon.ico" />
<meta name="msapplication-TileColor" content="#603cba" />
<meta name="msapplication-config" content="/favicons/browserconfig.xml" />
<meta name="theme-color" content="#ffffff" />
</>
);
}
};
export default Favicons;
Then again, no clue if ya still got relatable issues but hope this helps ya!