🧩 Plasmo Developers•2mo ago

Pass custom props to CSUI component

Hello, Because I am generating multiple plasmo-csui within getInlineAnchorList and fetching data in it, I would like to cache that data and maybe pass it as props to the react csui component. The data will be fetched asynchronously I did try to follow this doc https://docs.plasmo.com/framework/content-scripts-ui/life-cycle#custom-renderer But unfortunately, the snippet is always returning me this error. Is there a way to pass props to the react component?

Plasmo Docs

Life Cycle of Plasmo CSUI – Plasmo

Plasmo's CSUI orchestrates a lifecycle dedicated to mounting and unmounting your React, Vue, or Svelte components in a content script.

5 Replies

coder_iyke•2mo ago

I had this exact same problem (getInlineAnchorList too!) yesterday and was able to get it to work. You have to export a render function. Here's an example that worked for me:

export const render: PlasmoRender<PlasmoCSUIJSXContainer> = async ({
  createRootContainer
}) => {
  console.log('%c calling render', 'color: red; font-weight: bold;');
  const elements = document.querySelectorAll(`[data-testid="regular-listings"] > div  a:first-of-type > div > div:nth-of-type(3) > h2`);
  Array.from(elements).map(async (element, index) => {
    const rootContainer = await createRootContainer({
      element,
      type: "inline",
      insertPosition: 'afterend',
    } as any)
    const root = createRoot(rootContainer)
    root.render(<SearchResults id={index.toString()} key={index.toString()} index={index} />)
  });
}

export const render: PlasmoRender<PlasmoCSUIJSXContainer> = async ({
  createRootContainer
}) => {
  console.log('%c calling render', 'color: red; font-weight: bold;');
  const elements = document.querySelectorAll(`[data-testid="regular-listings"] > div  a:first-of-type > div > div:nth-of-type(3) > h2`);
  Array.from(elements).map(async (element, index) => {
    const rootContainer = await createRootContainer({
      element,
      type: "inline",
      insertPosition: 'afterend',
    } as any)
    const root = createRoot(rootContainer)
    root.render(<SearchResults id={index.toString()} key={index.toString()} index={index} />)
  });
}

I am currently having an issue where the CSUI elements are re-rendered infinitely, and using up system resources but it isn't caused by the render function

TikaïOP•2mo ago

I see! so mountShadow and getInlineAnchorList not needed anymore?

Arcane•2mo ago

@Tikaï has reached level 2. GG!

TikaïOP•2mo ago

might be related to the mutationObserver

coder_iyke•2mo ago

Let me explore that. I have been on this issue since yesterday without progress.

Gaming

Programming

Pass custom props to CSUI component