Correct DataProvider on Codegen

Hi all,

Another quick question:

Is this the correct DataProvider to use in Codegen?

import { DataProvider } from "@plasmicapp/loader-nextjs";

I need to use a DataProvider but it’s from a loader-nextjs package so worried that it might be incorrect.

For codegen, you should always import from @plasmicapp/react-web. In this case, the correct import is

import { DataProvider } from "@plasmicapp/react-web/lib/host";

Thanks @jason

Is there a related reason why the following is not working?

import { DataProvider } from "@plasmicapp/react-web/lib/host";
import React, { useEffect } from "react";

export function ScrollProvider({ children }: { children: React.ReactNode }) {
  const [isScrolled, setIsScrolled] = React.useState(false);

  useEffect(() => {
    const handleScroll = () => {
      console.log("Current scrollY:", window.scrollY);  // Log current scroll position
      setIsScrolled(window.scrollY > 0);
      console.log("isScrolled state:", window.scrollY > 0);  // Log isScrolled state after update
    };
    window.addEventListener("scroll", handleScroll);
    return () => {
      console.log("Cleanup called");  // Log when cleanup is being performed
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);  // Ensuring the effect setup/cleanup runs only once

  return (
    <DataProvider name={"isScrolled"} data={isScrolled}>
      {children}
    </DataProvider>
  );
}

Host:

import { ScrollProvider } from "../components/custom/ScrollContext";

registerGlobalContext(ScrollProvider, {
isDefaultExport: false,
  name: "ScrollProvider",
  providesData: true,
  props: {},
importPath: '../components/custom/ScrollContext',

});

To clarify, I’m getting “isScrolled” in plasmic, it’s just stuck on false regardless of page position. It works fine in loader.

Hi, I believe your code is correct, except for importPath: '../components/custom/ScrollContext', which should be importPath: './components/custom/ScrollContext', since importPath should be relative to the root. Your code should work in your codebase, but the capacity to handle scroll events is limited in the Studio, could you confirm that your code worked in Loader but not in Codegen ?

That’s an interesting point. I did get it working, though it doesn’t work in studio. That said, it did work in studio on loader.