How to make Electron window fit content automatically?

Viewed 329

I've created a basic app with create-react-app and wrapped it with Electron. Right now I'm just trying stuff out but all I want to achieve is an Electron window that fits the content size. I've barely changed CRA; all I've done is replace App.js with this:

function App() {
  return (
    <div style={{ height: '100px', width: '200px', background: 'slategray' }}>
        This is some stuff
    </div>
  );
}

So all it should be rendering is a div with size 200x100. As for the electron code:


const { app, BrowserWindow, globalShortcut } = require('electron');
const isDev = require('electron-is-dev');
const path = require('path');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    // width: 80,
    // height: 60,
    useContentSize: true,
    show: false,
    // frame: false,
    // transparent: true,
  });
  const startURL = isDev ? 'http://localhost:3000/app' : `file://${path.join(__dirname, '../build/index.html')}`;

  mainWindow.loadURL(startURL);

  mainWindow.once('ready-to-show', () => {
    mainWindow.show()
  });
  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}
app.on('ready', createWindow);

I've tried setting width and height to specific values, and tried commenting them out as seen above, but nothing changes; whenever I start the app the window opens at the specified width and height and not 200x100 as I would expect with useContentSize: true.

0 Answers
Related