I installed react-desktop via npm and then copied one of the code-blocks to test it out in my next.js application but I came across this error:

Error in react-desktop/macOs Module not found: Error: [CaseSensitivePathsPlugin] /Users/yuditan/projects/personal_website/node_modules/react-desktop/src/Box/macOs/index.js does not match the corresponding path on disk box. ModuleNotFoundError: Module not found: Error: [CaseSensitivePathsPlugin] /Users/yuditan/projects/personal_website/node_modules/react-desktop/src/Box/macOs/index.js does not match the corresponding path on disk box. at factoryCallback (/Users/yuditan/projects/personal_website/node_modules/webpack/lib/Compilation.js:276:40) at factory (/Users/yuditan/projects/personal_website/node_modules/webpack/lib/NormalModuleFactory.js:235:20) at applyPluginsAsyncWaterfall (/Users/yuditan/projects/personal_website/node_modules/webpack/lib/NormalModuleFactory.js:70:21) at /Users/yuditan/projects/personal_website/node_modules/tapable/lib/Tapable.js:265:18 at that.fileExistsWithCase (/Users/yuditan/projects/personal_website/node_modules/next/node_modules/case-sensitive-paths-webpack-plugin/index.js:156:15) at that.fileExistsWithCase (/Users/yuditan/projects/personal_website/node_modules/next/node_modules/case-sensitive-paths-webpack-plugin/index.js:109:7) at that.fileExistsWithCase (/Users/yuditan/projects/personal_website/node_modules/next/node_modules/case-sensitive-paths-webpack-plugin/index.js:109:7) at that.getFilenamesInDir (/Users/yuditan/projects/personal_website/node_modules/next/node_modules/case-sensitive-paths-webpack-plugin/index.js:97:7) at fs.readdir (/Users/yuditan/projects/personal_website/node_modules/next/node_modules/case-sensitive-paths-webpack-plugin/index.js:63:5) at /Users/yuditan/projects/personal_website/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:70:14 at _combinedTickCallback (internal/process/next_tick.js:95:7) at process._tickCallback (internal/process/next_tick.js:161:9)

I've noticed that the components in this project seem to mirror each other between macOS and windows. I assume that this is to enable developers to write the same code for both platforms? What's the suggested way of conditionally loading the correct component based upon the current platform? I don't think that something like this is supported:

if (process.platform === 'win32') {
    import { Window, TitleBar, Text } from 'react-desktop/windows'
} else {
    import { Window, TitleBar, Text } from 'react-desktop/macOs'
}

Imports have to be top level statements.

I've also experimented with something like this:

const platform = (process.platform === 'win32') ? 'windows' : 'macOs';

import { Window, TitleBar, Text } from `react-desktop/${platform}`

This doesn't work because import statements don't support string templates (or variables for that matter).

Any other ideas? Do I need to switch to SystemJS or something?

#65 I have used it for my electron application, but there is something wrong.

1. Window border doesn't render properly in electron.

If I set the width and height of the props window to match the width and height of the electron window, the window will not display completely. Here's the creation code for the electron window:

function createMainWnd() {
    mainWnd = new BrowserWindow({
        width:800,
        height:600,
        useContentSize: true,
        show: false,
        frame: false,
        transparent: true
    });

    mainWnd.loadURL(`file://${__dirname}/public/index.html`);

    mainWnd.on('ready-to-show', ()=>{
        Menu.setApplicationMenu(null);
        mainWnd.show();
        // mainWnd.webContents.openDevTools({ detach:true });
    });

  mainWnd.on('closed', () => {
    mainWnd = null;
    process.exit();
  });
}

And here's the react desktop's component JSX:

<Window
  color={this.props.color}
  theme={this.props.theme}
  chrome
  height="600px"
  width="800px"
>

If I set the window size to 808 * 608, and set the window transparent, it will work properly.

2. The upper-right control bar does not display normally.

Some control buttons cover the window border.

This may only happen in electron applications, but it does have an impact on the visual effect.

@gabrielbull

Titlebar controls can be disabled on macOS (not sure what the status is on windows) so I added this functionality.

Usage is:

<TitleBar
  title="untitled text 5"
  controls
  isFullscreen={this.state.isFullscreen}
  onCloseClick={() => console.log('Close window')}
  onMinimizeClick={() => console.log('Minimize window')}
  onMaximizeClick={() => console.log('Mazimize window')}
  onResizeClick={() => this.setState({ isFullscreen: !this.state.isFullscreen })}
  disableClose
  disableMinimize
  disableResize
/>

And it looks like this:

Button styling stays disabled (i.e. doesn't change) on hover or focus. It should also be noted that this does not affect click handlers (e.g.. onCloseClick). Users can do this in their application code instead.

I separated the two issues. Reference: Issue #61

Also, I started writing typings for react-desktop thinking it was the reason I couldn't get my NavMenu working, but it still didn't (called setstate() on an unmounted component) work (and my definitions are neither done nor guaranteed perfect).

Did you get it to work? Your example converted to ES6 works fine

Hi,

I am having a problem accessing the TextInput value. I have tried to use onChange then from there I set the state but that caused a weird behavior.

Is there a way to use ref with TextInput and be able to use it to access the input value?

      <TextInput
        ref="input"
        theme={this.props.theme}
        color={this.props.color}
        background
        label="My Input"
        placeholder="My Input"
        onChange={this.handleChange}
      />

by doing console.log(this.refs.input.value), I get undefined.

I am trying to use the input value based on click event that is coming from a button.

Any suggestions?

Thanks,

In going through the samples, it is unclear what element I should render the window component to in order to style the entire application window. Currently my BrowserWindow is:

  mainWindow = new BrowserWindow(
    { 
      width: 800 ,
      height: 600 ,
      //center: false ,
      //title: CONFIG.Title ,
      frame: false,  // causes no title bar on OSX
      //icon: /** see https://github.com/electron/electron/blob/master/docs/api/native-image.md --> The window icon. On Windows it is recommended to use ICO icons to get best visual effects, you can also leave it undefined so the executable's icon will be used. **/ "",
      //backgroundColor: /** String - Window's background color as Hexadecimal value, like #66CD00 or #FFF or #80FFFFFF (alpha is supported). Default is #FFF (white). **/ "#FFF",
      //transparent: false
    });

And my Window class is:

class WindowFrame extends React.Component<any, void> {
    static defaultProps = {
        color: '#cc7f29',
        theme: 'light'
    };

    render() {
        return (
            <Window
                color={this.props.color}
                theme={this.props.theme}
                chrome
                height="300px"
                padding="12px"
                >
                <TitleBar title="This is EDH Title #1" controls/>
                <Menu></Menu>
                <Text color={this.props.theme === 'dark' ? 'white' : '#333'}>HELLO WORLD</Text>
            </Window>
        );
    }
}

When using this code and rendering to the body tag, I yield:

My entire codebase is here

I'm trying to integrate react desktop components into a boilerplate by electron-react-boilerplate. Already set the frame option to false, tweak the margin to zero, I got the overflow scrollbar:

If I set the body style to overflow: hidden, the border of main window won't be able to display (due to overflow). In the snip below, right border is not showing.

Since the stylesheet of the boilerplate is pretty simple, I'm not really sure whether I miss any option. Any suggestion will be appreciated.

Styles still need some changes, but the base is there.

Also think maybe we should have a component loader/bootstrap of sorts so that we don't have to repeat all that code for a common component?

It seems as if this website content is no longer tracking the changelog file in this repo. Website - http://reactdesktop.js.org/docs/CHANGELOG file - https://github.com/gabrielbull/react-desktop/blob/master/CHANGELOG.md

When I click "Edit Page" on the website I am linked to "https://github.com/gabrielbull/react-desktop/edit/master/docs/CHANGELOG.md" which throws a 404.

It seems like this is the only Electron Native UI library still being maintained. Is there any plans on updating the project to make the UI look completely like macOS Mojave? Is there any plan to support Mojave's dark theme feature?

I've tried to install along with electron-react-boilerplate then got this error

npm install react-desktop --save


npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^15.0 || ^16.0" from [email protected]
npm ERR! node_modules/react-desktop
npm ERR!   react-desktop@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Hey @gabrielbull i was wondering if we can use vercel to deploy the website as it provides us free ssl certificate. And I Was Wondering If We Could Use A .tech domain like https://reactdesktop.tech

It would be so cool to have a new Windows 11 looking version of react desktop since it looks so much better.

https://www.youtube.com/watch?v=WucfckO0q48

I just wanted to know your thoughts and if there is any plans on this. I would be happy to help a little when I have some free time.

While using almost any components of react-desktop, I can see a lot of A string ref, "xxx", has been found within a strict mode tree. kinds of errors.

Is there a way to fix this or what particular version of the react should I be using?

The two attributes of the horizontalAlignment verticalAlignment are invalid in the box

I know that the display property needs to be flex,Why is it designed this way?

Thank you in advance!!!