I was using the following code to get user location based on their permission by clicking on button. It was working in my other project but failed to work on my new project.
import React, { useState } from "react";
import {
DataProvider,
GlobalActionsProvider,
} from "@plasmicapp/react-web/lib/host";
type Location = {
latitude: number | null;
longitude: number | null;
};
export function UserLocation({ children }: { children: React.ReactNode }) {
const [permission, setPermission] = useState(false);
const [location, setLocation] = useState<Location>({
latitude: null,
longitude: null,
});
const fetchLocation = () => {
if (typeof window === "undefined") return;
if (!navigator?.geolocation) {
console.warn("Geolocation not supported");
return;
}
navigator.geolocation.getCurrentPosition(
(pos) => {
console.log("✅ Got location:", pos.coords);
setLocation({
latitude: pos.coords.latitude,
longitude: pos.coords.longitude,
});
setPermission(true);
},
(err) => {
console.error("❌ Geolocation error:", err);
setPermission(false);
}
);
};
return (
<GlobalActionsProvider
contextName="UserLocation"
actions={{ requestPermission: fetchLocation }}
>
<DataProvider
name="userLocation"
data={{
latitude: location.latitude,
longitude: location.longitude,
permission,
}}
>
{children}
</DataProvider>
</GlobalActionsProvider>
);
}
This the component registration in plasmic-host
registerGlobalContext(UserLocation, {
// name should match GlobalActionsProvider contextName
name: "UserLocation",
// props should match LocationProviderProps
props: {},
// providesData should be true if the global context has a DataProvider
providesData: true,
// globalActions should match the global context's GlobalActionsProvider
globalActions: {
requestPermission: {
displayName: "Request Location",
parameters: [],
},
},
importPath: './components/UserLocation',
});
Further if $ctx is included in text component, the component will only be visible in plasmic studio and not at localhost
"User Location: " + $ctx.userLocation.permission
Plasmic Studio screenshot. Note the different on “User Location: false”
localhost screenshot:
I also notice following embedded CSS is not working
/* CSS snippet */
.shimmer-box {
background: linear-gradient(
90deg,
#2e4383 0%, /* darker shade */
#3953A4 70%, /* base blue */
#4a67c8 100% /* lighter shade */
);
background-size: 200% 100%;
animation: shimmer 1.5s linear infinite;
}
@keyframes shimmer {
from { background-position: 100% 0; }
to { background-position: -100% 0; }
}
My project ID: 8sZCTFVobhhvVTD2aCPAs5
I had tried to create using html to detect user location and it worked.
Hope for some enlightment.
Thank you.