How can I create a widget using React

Question

I am trying to create a widget which can be plugged to any website, just like some chat widget. I am trying to below but getting error:

const widgetDivs = document.querySelectorAll('.proc_widget');

   widgetDivs.forEach((div) => {
      ReactDOM.render(
        <React.StrictMode>
          <App symbol={div.dataset.symbol} />
        </React.StrictMode>,
        div
      );
    });


 ERROR:  Uncaught TypeError: react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function

I was referring this: https://tekinico.medium.com/build-a-react-embeddable-widget-c46b7f7999d8

but looks like this is old post and I am using latest version of react, which directly render root. can someone please share me some idea to make a widget and bundle it.

score 0 · Answer 1 · answered Mar 11 '23 at 17:44

0

Please check my answer to the follwing question: Building a Live Chat Widget from Scratch using React

I'm pretty sure there is all you need to start buildind web widget.

answered Mar 11 '23 at 17:44

Antek

575
3
11

Actually, I was using a newer version of React, after react 18, they had deprecated ReactDOM.rennder. – Atul Verma Mar 12 '23 at 18:55

score 0 · Accepted Answer · answered Mar 12 '23 at 18:55

I fixed it by doing below:

const widgetDivs = document.querySelectorAll('.proc_widget');

widgetDivs.forEach((div) => {
  const root = ReactDOM.createRoot(div);
  root.render(
    <React.StrictMode>
      <App symbol={div.dataset.symbol} />
    </React.StrictMode>
  );
});

How can I create a widget using React

2 Answers2