React UI Components for macOS High Sierra and Windows 10

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.

Issues
  • Linux Support

    Linux Support

    The docs and description only mentions windows 10 and OSX, why doesn't it work on linux? Both the electron and node-webkit work on it btw.

    opened by steelbrain 11
  • 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 YudiTan 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
  • use arrow function instead of .bind(this)

    use arrow function instead of .bind(this)

    Not sure whether you will want this or not, also it's maybe worth a try es7.classProperties.

    opened by chentsulin 5
  • initialize test for src/Color.js

    initialize test for src/Color.js

    It seems a part of function does not completed implement yet. Are there any reasons why not just using color npm package for doing those things?

    opened by chentsulin 5
  • 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
  • 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
  • Improve macOS title bar control icons

    Improve macOS title bar control icons

    This PR brings better title bar icons for macOS theme what looks exactly like native ones.

    Before: before

    After: after

    opened by sbekrin 4
  • How do I get the window and title bar to use that old look and feel?

    How do I get the window and title bar to use that old look and feel?

    I mean this one:

    image

    instead of this one, used in WPF, etc:

    image

    How do I make my application to use the first one?

    opened by MassMessage 0
  • 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.

    opened by paulsancer 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
    opened by awasthishubh 1
  • Show datatable?

    Show datatable?

    Can ReactDesktop Show datatable like

    MacOS -> Numbers ?

    Windows -> Excel?

    opened by Taymindis 0
  • 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
  • Is react-desltop support webview tag?

    Is react-desltop support webview tag?

    Is react-desltop support webview tag?

    I want to do some thing , like I click a button and then open a website in my desktop app(without iframe tag),some thing like a browser.

    I can't find any infomation in document page.

    opened by ken30huang 1
  • chore: refactor button to use styled-components

    chore: refactor button to use styled-components

    This is just a suggestion @gabrielbull.

    It does not implement the basic integration of the library features.

    Right now I just removed all other dependencies/features. I kept the version for the styles to allow supporting different os x versions.

    Screen Shot 2019-09-11 at 14 35 48
    opened by pixelass 3
  • Not Found - GET https://registry.npmjs.org/@types%2freact-desktop - Not found

    Not Found - GET https://registry.npmjs.org/@types%2freact-desktop - Not found

    Not Found - GET https://registry.npmjs.org/@types%2freact-desktop - Not found

    opened by JayenLee 2
  • Development Experience concerns

    Development Experience concerns

    Hi guys!

    I found this project very interesting in the long term, however and may be I'm wrong, but it seems that it's hard to on board to contribute into this projects since it's not clear what is an input and output of each UI component. For example both themes have it's own component realization that's why you need tests for each of them. Also it's hard to switch from one theme to another depending on the clients OS.

    Just an idea why not to extract the components codebase itself having all possible props declared and handled in place and separate macOS and Windows styles as themes. I saw issue talking about styled-components, that's a great idea, but it will be hard to rewrite everything in a moment because of all conditions.

    And I see that Functional Components & Recompose are a good tools to refactor codebase to. When the props declaration will be in place it'd be easy to generate consistent docs. And having styles splitted from the implementation it'd be easy to add other themes like for Ubuntu/Windows Classic/etc.

    opened by loginov-rocks 1
  •  Can't Set Checkbox State With setState by Reading from User Preference

    Can't Set Checkbox State With setState by Reading from User Preference

    There are two check boxes. I want to set defaultChecked value to values coming from ipcMain (saved user preference) but even the state is true, it's always in unchecked position. Checked the state in render function, it logs true but I can't set them.

    I am reading from the default values saved in json (with electron-settings package) There are two of them one is true one is false. No matter what I tried Checkboxes always false.

    I have no experience in react, so if it is a silly mistake, I'm sorry:)

    Here is my code: Also full github repository is here: (https://github.com/hullabaloon/react-desktop-checkbox)

    import React from "react";
    import { Checkbox } from "react-desktop/macOs";
    
    import { IPC_READ_ALL_PREFS, IPC_GET_ALL_PREFS } from "./constants";
    const electron = window.require("electron");
    const ipcRenderer = electron.ipcRenderer;
    
    export default class PreferencesPage extends React.Component {
      constructor(props) {
        super(props);
    
        this.state = {
          isCheckedTerminal: false,
          isCheckedHistory: false
        };
        
        this.ipcGetAllPrefs = this.ipcGetAllPrefs.bind(this);
    
        this.toggleChangeTerminal = this.toggleChangeTerminal.bind(this);
        this.toggleChangeHistory = this.toggleChangeHistory.bind(this);
    
        
      }
    
      // Prevent Memory Leak by removing listeners..
      componentWillUnmount() {
        ipcRenderer.removeListener(IPC_GET_ALL_PREFS, this.ipcGetAllPrefs);
      }
    
      componentWillMount() {}
    
      // Send IPC command to read preferences
      componentDidMount() {
    
        ipcRenderer.on(IPC_GET_ALL_PREFS, this.ipcGetAllPrefs);
    
        ipcRenderer.send(IPC_READ_ALL_PREFS, "ping");
    
        console.log("Component DID Mount - TERMINAL: ", this.state.isCheckedTerminal); // true
        console.log("Component DID Mount - HISTORY: ", this.state.isCheckedHistory); // false
      }
    
      // ## IPC METHOD ## //
      ipcGetAllPrefs(event, allPrefs) {
        console.log("ipcGetAll TERMINAL: ", allPrefs.pref_terminal.value); // true
        console.log("ipcGetAll HISTORY: ", allPrefs.pref_history.value); // false
    
        // Set state with saved user preference coming from main
        // Saving data not implemented yet. Reads from default values. 
        this.setState({
          isCheckedTerminal: allPrefs.pref_terminal.value, // true
          isCheckedHistory: allPrefs.pref_history.value //  false
        });
      }
    
      // ##  Toggle  ##
    
      toggleChangeTerminal = () => {
        this.setState({
          isCheckedTerminal: !this.state.isCheckedTerminal
        });
      };
      toggleChangeHistory = () => {
        this.setState({
          isCheckedHistory: !this.state.isCheckedHistory
        });
      };
    
      render() {
        console.log("CALLED FROM RENDER: ", JSON.stringify(this.state)); // obj1:true and and obj2: false
    
        return (
          <div>
            <Checkbox
              label="Terminal"
              onChange={this.toggleChangeTerminal}
              defaultChecked={this.state.isCheckedTerminal}
            />
    
            <Checkbox
              label="History"
              onChange={this.toggleChangeHistory}
              defaultChecked={this.state.isCheckedHistory}
            />
          </div>
        );
      }
    }
    
    
    
    opened by xyzmes 1
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
dataminr-react-components - Collection of reusable React Components and utility functions.

react-components A collection of reusable React components with their own Flux lifecycle. What's inside react-components? Table Component From a simpl

Dataminr 263 Dec 17, 2021
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI Web Fluent UI web represents a collection of utilities, React components, and web components for building web applications. This repo is hom

Microsoft 12.7k Jan 14, 2022
🧩 Medly components provides numerous themable react components, each with multiple varitaions of sizes, colors, position etc.

?? Medly components provides numerous themable react components, each with multiple varitaions of sizes, colors, position etc.

Medly 63 Jan 10, 2022
Nextjs-components - A collection of React components

nextjs-components A collection of React components, transcribed from https://vercel.com/design. 1 Motivation TBD Todo's Unit test coverage Unit tests

null 22 Jan 15, 2022
Mantine is a MIT licensed open source react components and hooks library with focus on usability, accessibility and developer experience.

React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience

Mantine 3.8k Jan 17, 2022
ClearX is an alternative way to Redux and MobX to maintain the application state and provides a simple interface to bind it to UI components

ClearX is an alternative way to Redux and MobX to maintain the application state and provides a simple interface to bind it to UI components. It has utilities to set or get deep properties of nested data using paths.

Autodesk 18 Nov 10, 2021
React components and demo for the Tabler UI theme.

Update - June 2019: Version 2 Alpha now available on NPM: npm install [email protected] yarn add [email protected] Check out the latest progress and

Tabler 1.8k Jan 18, 2022
React components for easier customization and smooth development flow.

Sha-el-design React components for easier customization and smooth development flow. ?? Features ?? Material inspired design. ?? A complete package of

null 29 Jan 10, 2022
An opinionated UI Workbench featuring tools like react, styled components, typescript, webpack, jest and storybook all bundled into an easy to use interface

An opinionated UI Workbench featuring tools like react, styled components, typescript, webpack, jest and storybook all bundled into an easy to use interface

Alex Wright 17 Dec 18, 2021
Opinionated React UI library, built with styled-components and TypeScript.

Opinionated React UI library, built with styled-components and TypeScript.

Lapidist 0 Jan 10, 2022
Pancake UIkit is a set of React components and hooks used to build pages on Pancake's apps.

?? Pancake UIkit Pancake UIkit is a set of React components and hooks used to build pages on Pancake's apps. It also contains a theme file for dark an

PolyPup 1 Nov 4, 2021
A set of React components and hooks used to build pages on Wakanda's apps

Wakanda UIkit is a set of React components and hooks used to build pages on Wakanda's apps. It also contains a theme file for dark and light mode.

wakandaswap 0 Dec 16, 2021
Bootstrap components built with React

React-Bootstrap Bootstrap 4 components built with React. Docs See the documentation with live editable examples and API documentation. To find the doc

react-bootstrap 20.3k Jan 14, 2022
Simple React Bootstrap 4 components

reactstrap Stateless React Components for Bootstrap 4. Getting Started Follow the create-react-app instructions to get started and then follow the rea

reactstrap 10.2k Jan 13, 2022
⚡️ Simple, Modular & Accessible UI Components for your React Applications

Build Accessible React Apps with Speed ⚡️ Chakra UI provides a set of accessible, reusable, and composable React components that make it super easy to

Chakra UI 23.3k Jan 16, 2022
:atom_symbol: React primitive UI components built with styled-system.

Rebass React primitive UI components built with Styled System. https://rebassjs.org npm i rebass Getting Started import React from 'react' import { Bo

Rebass 7.6k Jan 20, 2022
🧱 A suite of React components .

English | 中文版 React Suite is a set of react component libraries for enterprise system products. It is a well-thought-out and developer-friendly UI fra

React Suite 6.4k Jan 14, 2022
React components for Bulma framework

React-bulma-components React components for Bulma (v0.8.2) UI compatible with most used React Frameworks (Gatsby, CRA, Next.js) V4 Pool Please Check h

John 1.1k Jan 12, 2022
React.js components for Modern CSS framework based on Flexbox

React-Bulma React.js components for Modern CSS framework based on Flexbox Styleguide: https://kulakowka.github.io/react-bulma/ Official Repo: https://

Anton Kulakov 462 Jan 7, 2022