Correct DataProvider on Codegen

Developer Support
1

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.

2

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

Documentation here: Using DataProvider to provide data to Plasmic Studio | Learn Plasmic

2 Likes
3

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.

4

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 ?

5

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.

6

Hi, could you confirm if you have something like the following in your global css:

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

And that removing the overflow-x rule would fix your issue ?

7

can this be on the documentation as well? I don’t see this mentioned at all

8

Thanks for the ping. I have updated our documentation here: Using DataProvider to provide data to Plasmic Studio | Learn Plasmic