question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to use this library with the React

See original GitHub 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 Screen Shot 2021-03-10 at 9 35 20 PM

Desktop (please complete the following information):

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

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:15 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
system32uwucommented, Mar 13, 2021

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.

1reaction
raviSussolcommented, Mar 13, 2021

@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).

Read more comments on GitHub >

github_iconTop Results From Across the Web

Integrating with Other Libraries - React
This guide will examine some of the more common use cases, focusing on integration with jQuery and Backbone, but the same ideas can...
Read more >
How do I use/include third party libraries in react?
Option 2: Install the library using npm install <package-name> -S and import the library into relevant project files. · Ensure you installed the ......
Read more >
Using Libraries - React Native
To install a library in your project, navigate to your project directory in your terminal and run the installation command. Let's try this...
Read more >
How to include an external JavaScript library to ReactJS
Step 1: Create a React application using the following command inside your terminal or command prompt: npx create-react-app name_of_the_app.
Read more >
How to Create and Publish a React Component Library
import React from "react"; import "./Button.css"; export interface ButtonProps { label: string ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found