How to inject a React component in webview

[valerxx22]

I have an Electron/React app that is now rendering everything in one window. In my app I want to open some external URLs and I thought tabs would be the great way to do it. After some research found this module electron-tabs that fits my requirements. Electron-tabs renders the content of each tab in a webview.

I did some tests of the library in a clean Electron/React boilerplate and I encountered a difficulty. While I can open other tabs with external URLs, I can't mount an React Component into my first tab, that will always be the main tab (let's called pinned tab)

Here's my code snippet example:

const Hello = () => {
  useEffect(() => {
    const tabGroup = new TabGroup({
      newTab: {
        title: 'New Tab',
      },
    });

    tabGroup.addTab({
      title: 'Client Tab',
      src: `${(<ReactApp />)}`,
      active: true,
      visible: true,
    });

    tabGroup.addTab({
      title: 'Google',
      src: ​'https://google.com/',
     ​visible: true,
   ​});
 ​}, []);

 ​return (
   ​<div>
     ​<div className="etabs-tabgroup">
       ​<div className="etabs-tabs" />
       ​<div className="etabs-buttons" />
     ​</div>
     ​<div className="etabs-views" />
   ​</div>
 ​);
};

export default function App() {
 ​return (
   ​<Router>
     ​<Switch>
       ​<Route path="/" component={Hello} />
     ​</Switch>
   ​</Router>
 ​);
}

How I can inject a React Component passed in the src attrribute?

[brrd]

According to the documentation src is supposed to be an URL and can't be anything else:

src: "file://" + __dirname + "/tab.html",

Then you can do whatever you want in tab.html, using React or not.

[puchenhui]

Hello, I'm also going to use electron-tab in react. How did you introduce it? It won't take effect after I introduced it. By the way, my previous electric project was written in native js, and now I'm ready to use react. @valerxx22

[Nktech-Official]

Hello, I'm also going to use electron-tab in react. How did you introduce it? It won't take effect after I introduced it. By the way, my previous electric project was written in native js, and now I'm ready to use react. @valerxx22

import {useEffect} from 'react'
import 'electron-tabs'

export default function App(){
useEffect(() => {
    const tabGroup = document.querySelector('tab-group')

    tabGroup.setDefaultTab({
      title: 'New Page',
      src: './',
      active: true
    })

    // Do stuff
    const tab = tabGroup.addTab({
      title: 'electron-tabs on NPM',
      src: '/pdf'
    })
    return () => {
      tab.close()
    }
  }, [])

return (
 <tab-group style={{ width: '100%' }} new-tab-button="true" sortable="true"></tab-group>
)
}