Stuck on an issue?

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