React UI Components for macOS High Sierra and Windows 10

Related tags

React react-desktop
Overview

React Desktop

Build Status Code Climate Dependency Status peerDependency Status devDependency Status npm downloads npm version Gitter

React UI Components for macOS High Sierra and Windows 10.

npm install react-desktop --save

Demo

Help wanted!

I am looking for developers to help me develop this project. Please submit some ideas in the issues section or some PRs to get this project going. If you are interested, you can become a collaborator on the project. Thanks.

Contributing

This library has been created to bring a native desktop experience to the web. It works extremely well with tools such as node-webkit or Electron.js!

Everyone is welcome to contribute and add more components/documentation whilst following the contributing guidelines.

Documentation

Guides on installation, components and advanced usage are found in the documentation.

Comments
  • Does not match corresponding path with next.js

    Does not match corresponding path with next.js

    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)

    opened by yudi-tan 7
  • Conditional Module Loading

    Conditional Module Loading

    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?

    enhancement 
    opened by stdavis 7
  • There's something wrong with the title bar.

    There's something wrong with the title bar.

    #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. 25c5cc.png 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.

    10ade5.gif 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

    bug 
    opened by langyo 6
  • Add ability to disable individual titlebar controls

    Add ability to disable individual titlebar controls

    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:

    image

    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.

    opened by davej 6
  • NavMenu does not work with TypeScript

    NavMenu does not work with TypeScript

    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

    bug 
    opened by gabrielbull 5
  • How to use refs to access TextInput value

    How to use refs to access TextInput value

    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,

    bug 
    opened by luayalshawi 4
  • Element to Render Window Component to for Styling entire Application

    Element to Render Window Component to for Styling entire Application

    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:

    image

    My entire codebase is here

    opened by erichiller 4
  • Integrate with electron-react-boilerplate style problem

    Integrate with electron-react-boilerplate style problem

    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: image

    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.

    image

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

    opened by xgenvn 4
  • Started Windows Label, TextField & Button

    Started Windows Label, TextField & Button

    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?

    opened by Salakar 4
  • Demo / Docs Website Changelog not Updating!

    Demo / Docs Website Changelog not Updating!

    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.

    opened by Dilks44 3
  • macOS Mojave and dark mode

    macOS Mojave and dark mode

    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?

    opened by holgersindbaek 3
  • Can't use along with electron-react-boilerplate?

    Can't use along with electron-react-boilerplate?

    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: [email protected]
    npm ERR! Found: [email protected]
    npm ERR! node_modules/react
    npm ERR!   [email protected]"^18.2.0" from the root project
    npm ERR!
    npm ERR! Could not resolve dependency:
    npm ERR! peer [email protected]"^15.0 || ^16.0" from [email protected]
    npm ERR! node_modules/react-desktop
    npm ERR!   [email protected]"*" 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.
    
    opened by dzpt 0
  • Use Vercel To Deploy The Docs

    Use Vercel To Deploy The Docs

    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

    enhancement 
    opened by CoderableOfficial 2
  • Windows 11 upgrade?

    Windows 11 upgrade?

    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.

    enhancement 
    opened by pauldevson 1
  •  A string ref,

    A string ref, "xxx", has been found within a strict mode tree.

    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?

    Screenshot 2020-12-14 at 20 16 57 bug 
    opened by awasthishubh 3
  • Two properties of the Box component are invalid

    Two properties of the Box component are invalid

    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!!!

    opened by liangshen001 0
Releases(v0.3.8)
Owner
Gabriel Bull
I am Gabriel Bull. Software developer, OSS advocate, designer, electrical engineering newbie and CTO at Totem Acoustic.
Gabriel Bull
Vue-hero-icons - A set of free MIT-licensed high-quality SVG icons, sourced from @tailwindlabs/heroicons, as Vue 2 functional components.

vue-hero-icons For Vue3, install the official package @heroicons/vue A set of free MIT-licensed high-quality SVG icons, sourced from @tailwindlabs/her

Mathieu Schimmerling 94 Sep 14, 2022
A lightweight Apple Music client for Windows, built with MusicKit JS, Edge WebView2 and React.

Lito Music English | 中文 Lito (/laɪto/) Music is a lightweight Apple Music client for Windows, built with MusicKit JS, Edge WebView2 and React. System

Jiahao Lu 101 Sep 18, 2022
Windows notepad in web with additional features! Made with typescript and react.

Notepad Windows notepad in web with additional features! ?? Table of Contents ?? About Why I created ? Helpful for ? Who can contribute ? ?? Getting S

Muhammed Rahif 23 Jul 28, 2022
A React utility belt for function components and higher-order components.

A Note from the Author (acdlite, Oct 25 2018): Hi! I created Recompose about three years ago. About a year after that, I joined the React team. Today,

Andrew Clark 14.8k Sep 21, 2022
Nextjs-components: A collection of React components

nextjs-components A collection of React components, transcribed from https://vercel.com/design. 1 Motivation Blog post from 01/09/2022 Todo's Unit tes

null 85 Sep 18, 2022
Chat Loop is a highly scalable, low-cost, and high performant chat application built on AWS and React leveraging GraphQL subscriptions for real-time communication.

Chat Loop Chat Loop is a highly scalable, low cost and high performant chat application built on AWS and React leveraging GraphQL subscriptions for re

Smile Gupta 24 Jun 20, 2022
🏁 High performance subscription-based form state management for React

You build great forms, but do you know HOW users use your forms? Find out with Form Nerd! Professional analytics from the creator of React Final Form.

Final Form 7.1k Sep 23, 2022
IngredientRecipeFinder - Web app built with react using Edamam API to find any recipe for an ingredient search with nutrition filters (high protein, low carb,etc)

Ingredient Recipe Finder Web app This web app built with the use of Edamam API allows you to find any type of recipe for a specific ingredient you are

null 1 Jan 4, 2022
A react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

fork-me-corner fork-me-corner is a react component available on npm to easily link to your project on github and is made using React, TypeScript and s

Victor Dantas 9 Jun 30, 2022
Clone da GUI do Windows 11 desenvolvida utilizando ReactJS, NextJS, MaterialUI e ReactDND.

Vídeo demonstração Iniciando a execução: npm run dev Frameworks & Bibliotecas: React.js - uma biblioteca JavaScript para a criação de interfaces de us

nicolle 101 Aug 10, 2022
React components and hooks for creating VR/AR applications with @react-three/fiber

@react-three/xr React components and hooks for creating VR/AR applications with @react-three/fiber npm install @react-three/xr These demos are real,

Poimandres 1.3k Sep 19, 2022
we are make our components in story book. So if we add some components you can find document and example of useage in storybook.

we are make our components in story book. So if we add some components you can find document and example of useage in storybook.

고스락 6 Aug 12, 2022
Providing accessible components with Web Components & Material You

tiny-material Still on developing, DO NOT use for production environment Run well on Google Chrome, Firefox, Chrome for Android, Microsoft Edge (Chrom

HugePancake 12 Sep 16, 2022
Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

Onsen UI - Cross-Platform Hybrid App and PWA Framework Onsen UI is an open source framework that makes it easy to create native-feeling Progressive We

null 8.6k Sep 22, 2022
High performance personalization & a/b testing example using Next.js, Edge Middleware, and Builder.io

Next.js + Builder.io Personalization & A/B Testing with Edge Middleware This is a fork of Next.js Commerce with Builder.io integrated and using Edge M

Builder.io 7 Sep 6, 2022
Shows how React components and Redux to build a friendly user experience with instant visual updates and scaleable code in ecommerce applications

This simple shopping cart prototype shows how React components and Redux can be used to build a friendly user experience with instant visual updates and scaleable code in ecommerce applications.

Alan Vieyra 4 Feb 1, 2022
🔄 Basic project to start studying React and Typescript. With it you can translate text to binary or morse language. This project addresses the creation of routes and components.

max-conversion Projeto criado para iniciar nos estudos de React e Typescript Basic project to gain knowledge in react Na plataforma é possível convert

Igor Neves 3 Feb 12, 2022
React components for efficiently rendering large lists and tabular data

React components for efficiently rendering large lists and tabular data. Check out the demo for some examples. Sponsors The following wonderful compan

Brian Vaughn 24.2k Sep 19, 2022
React components for efficiently rendering large lists and tabular data

react-window React components for efficiently rendering large lists and tabular data React window works by only rendering part of a large data set (ju

Brian Vaughn 13.1k Sep 26, 2022