How to use this library with the React

Describe the bug I’d like to use this library with the React library in the electron js. I’ve setup the electron js with the React and I’ve installed this library in my project. I’ve tried with few approaches to load custom electron title bar in the app but it doesn’t show the custom title bar when electron js app starts. Here’s my attempt to load custom title bar:

CustomTitlebar.js

import React, { useEffect } from 'react';
import { Titlebar, Color } from 'custom-electron-titlebar';

/**
 *
 * @returns customized window title bar
 */
const CustomTitlebar = ({children}) => {
  const loadCustomTitlebar = async () => {
    const customTitlebar = new Titlebar();
    customTitlebar.updateBackground(Color.fromHex('#d8d8d8'));
    customTitlebar.setHorizontalAlignment = 'center';
    customTitlebar.updateTitle = 'Home - Hisab';
    return customTitlebar;
  };

  useEffect(() => {
    window.addEventListener('DOMContentLoaded', loadCustomTitlebar);
    // Clean up above functions on unmount
    return () =>  {
      window.removeEventListener('DOMContentLoaded', loadCustomTitlebar);
    }
  }, []);
  return (
    <div>{children}</div>
  );
};
export { CustomTitlebar };

App.js

import React from 'react';
import { CustomTitlebar } from './components';

const App = () => {
  return (
    <CustomTitlebar>
      <h2>Welcome to the Hisab!</h2>
    </CustomTitlebar>
  )
}

export default App;

I’ve also make frame: false and titleBarStyle: 'hidden' in my main process. But still the custom title bar doesn’t show up when the app loads up.

Expected behavior Must show customized title bar when the app loads up.

Screenshots

Desktop (please complete the following information):

• OS: mac/windows
• Electron version 12.0.0
• Node Version 14.15.4

[system32uwu]

Agree, I tried making my own title bar but there’s no way to make it work without enabling nodeIntegration and disabling contextIsolation, I followed this.

[raviSussol]

@system32uwu Glad that you resolve it 👍 The error you’d noticed at first for me was to set following contrainsts in the webPreferences:

- nodeIntegration: true
- contextIsolation: false
- enableRemoteModule: true

They are enough to resolve your issue. But according to the latest electron js pattern or in the latest electron version those settings are anti-pattern. Making node integration to true leads you to the security vulnerabilities as all node APIs become accessible from the renderer process which you might want to restrict/control based on your requirement only. In the latest version of the electron js contextIsolation comes with true by default to improve other security risks more details in here. So these things you may want to consider before setting above preferences for custom title bar in your app. I think this custom titlebar library may need to update along with the latest version of the electron to cope with these new changes. So I’m also not thinking to use it in my project for now (unless someone would update this library or make the React friendly - which would be awesome).