Use React.forwardRef for Plasmic components?

[donalffons]

Hi,

I would like to use the useRef hook on Plasmic Components to get an imperative handle on the underlying DOM element, i.e.

function Projects() {
  // Use PlasmicProjects to render this component as it was
  // designed in Plasmic, by activating the appropriate variants,
  // attaching the appropriate event handlers, etc.  You
  // can also install whatever React hooks you need here to manage state or
  // fetch data.
  //
  // Props you can pass into PlasmicProjects are:
  // 1. Variants you want to activate,
  // 2. Contents for slots you want to fill,
  // 3. Overrides for any named node in the component to attach behavior and data,
  // 4. Props to set on the root node.
  //
  // By default, PlasmicProjects is wrapped by your project's global
  // variant context providers. These wrappers may be moved to
  // Next.js Custom App component
  // (https://nextjs.org/docs/advanced-features/custom-app).
  const ref = React.useRef();
  return (
    <UnnamedGlobalGroupOfVariantsContext.Provider value={undefined}>
      <PlasmicProjectsPage ref={ref} />
    </UnnamedGlobalGroupOfVariantsContext.Provider>
  );
}

Currently, doing this gives the following error.

I think it might be a good addition to wrap the Plasmic components inside a React.forwardRef statement. For my personal project, this is currently not super critical. But going forward, I think this might come in handy, eventually...

[wellguimaraes]

You can use

<PlasmicProjectsPage root={{ ref }} />

[donalffons]

Nice! Thanks a ton!