如何将 Pixlee Social Feed 添加到 React 应用程序？

Question

I have created a social feed for my Instagram using Pixlee and got a sample to use with my page looking like this:

<div id="pixlee_container"></div>
<script type="text/javascript">window.PixleeAsyncInit = function() {Pixlee.init({apiKey:'ThisIsASecretApiKey'});Pixlee.addSimpleWidget({widgetId:'32861'});};</script>
<script src="//instafeed.assets.pxlecdn.com/assets/pixlee_widget_1_0_0.js"></script>

How can I incorporate this into a react page? How can I load and execute whats within the script tags in a React context?

EDIT:
I found that I can use <Helmet> to include scripts within a React component like this:

<Helmet>
  <script type="text/javascript">window.PixleeAsyncInit = function() {Pixlee.init({apiKey:'ThisIsASecretApiKey'});Pixlee.addSimpleWidget({widgetId:'32861'});};</script>
  <script src="//instafeed.assets.pxlecdn.com/assets/pixlee_widget_1_0_0.js"></script>
</Helmet>

Doing this I get an error for the first script tag saying:
C:\utveckling\blog\src\pages\instagram.tsx: Unexpected token, expected "}" (18:122)

Answer 1

I found a solution by putting the script parts within a useEffect tag like this:

const InstagramFeed = (): JSX.Element => {

  // Init Pixlee Social Feed
  useEffect(() => {
    window.PixleeAsyncInit = function() {
      Pixlee.init({ apiKey: "ThisIsASecretApiKey" })
      Pixlee.addSimpleWidget({ widgetId: "32861" })
    }

    const scriptTag = document.createElement("script")
    scriptTag.src =
      "//instafeed.assets.pxlecdn.com/assets/pixlee_widget_1_0_0.js"
    document.body.appendChild(scriptTag)
  }, [])

  return (
    <>
    <div id="pixlee_container" />
    </>
  )
}

Answer 2

You should add the scripts to your index.html that is in your public folder and your div whatever component you want. See this CodeSandbox: https://codesandbox.io/s/mystifying-tdd-3x6pn?file=/public/index.html:587-606

If you set your key in the script function, it should work.