Access Electron Api from React

Question

I’m building up a new react app on electron , I want to access electron api from react Component to close the app with a button.

i tried to import electron but it give me module not found

import React, { Component } from 'react';
import './Frame.scss';

class Frame extends Component {
  render() {
    return(
      <div className="kr-app-frame">
        <div className="kr-app-frame-buttons-block">
            <button id="close" className="kr-app-frame-button">X</button>
        </div>
      </div>
    )
  }
}

export default Frame;

Answer 1

instead of :

const { remote } = require('electron');

use this :

const { remote } = window.require('electron');

Answer 2

import React from 'react';
// how to import the remote module in a React component?
const electron = window.require('electron');
const remote = electron.remote
const {BrowserWindow,dialog,Menu} = remote

Enable the remote module by setting the enableRemoteModule option to true. Inside your electron.js or main.js file or whatever name you have used.

function createWindow () {
// Create the browser window.
const win = new BrowserWindow({
   width: 800,
   height: 600,
   webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
      enableRemoteModule:true,
   }

})

you can set the webPreferences.contextIsolation to be false like this