-
Notifications
You must be signed in to change notification settings - Fork 150
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Ref under nextjs dynamic import #147
Comments
Hi @vasturiano I couldn't find any examples with nextjs, specifically using dynamic import, could you guide me? |
This React component is framework agnostic, so there wouldn't be any on this repo. This appears to be an issue with nextjs rather than here, so perhaps a dedicated forum to nextjs would be more helpful. |
Hi, for you or others who may have this issue, I've solved it by wrapping Globe in its own component. "use client";
import {useEffect, useRef, useState} from "react";
import Globe from "react-globe.gl";
export default function _Globe() {
const markerSvg = `<svg viewBox="-4 0 36 36">
<path fill="currentColor" d="M14,0 C21.732,0 28,5.641 28,12.6 C28,23.963 14,36 14,36 C14,36 0,24.064 0,12.6 C0,5.641 6.268,0 14,0 Z"></path>
<circle fill="black" cx="14" cy="14" r="7"></circle>
</svg>`;
const [globeCenter, setGlobeCenter] = useState({lat: 0, lng: 0, altitude: 2});
const globeEl = useRef(null);
useEffect(() => {
globeEl.current.pointOfView(globeCenter);
globeEl.current.controls().enableZoom = false;
}, [globeEl.current]);
useEffect(() => {
console.log("REF", globeEl);
}, [globeEl]);
return (
<Globe
height={500}
ref={globeEl}
backgroundColor="rgba(0,0,0,0)"
htmlElementsData={[{lat: "50.073658", lng: "14.418540", color: "white", size: "35", label: "Prague"}]}
htmlElement={(d) => {
const el = document.createElement("div");
el.innerHTML = markerSvg;
el.style.color = d.color;
el.style.width = `${d.size}px`;
el.style["pointer-events"] = "auto";
el.style.cursor = "pointer";
el.onclick = () => globeEl.current.pointOfView({lat: d.lat, lng: d.lng}, 750);
return el;
}}
pointOfView={{lat: 50.073658, lng: 14.41854}}
globeImageUrl="//unpkg.com/three-globe/example/img/earth-blue-marble.jpg"
/>
);
} and then dynamically importing this disabling ssr into the main component. const Globe = dynamic(() => import("./Globe").then((mod) => mod.default), {
ssr: false,
loading: () => (
<div className="w-full h-[500px] flex justify-center items-center">
<span>Loading the world</span>
</div>
),
}); and then just using it normally export default function Home() {
return(
<div>
{/* some JSX */}
<Globe />
{/* some more JSX stuff */}
</div>
)
} Hope it helps! |
Yep, this works! Thank you so much!! |
Currently ref ( or even with forwardRef ) doesn't seem to work, here is my implementation:
The text was updated successfully, but these errors were encountered: