そーす

I'm a programmer in Fukuoka. Please contact me saubre.app[at]gmail.com or Twitter DM.

Proton-native

Proton Native - React Native for the desktop, cross compatible

https://proton-native.js.org/SVG/Artboard%201.svg

Reactを使ってデスクトップアプリが作れるライブラリが公開されていました。

なんでも

Create native desktop applications through a React syntax, on all platforms Same syntax as React Native

だそうです。

libuiというマルチプラットフォームGUIライブラリがあるのですがそれをnodeから使えるようにするlibui-nodeというライブラリがあって、Proton-nativeではProton-nativeのオーナーがlibui-nodeをフォークしているものを取り込んでいるようです。

このあたりはReact Nativeっぽさがありますね。

Quick Start

Proton Native - React Native for the desktop, cross compatible

してみました。

f:id:saburesan:20180216075211p:plain

これだと面白くないので、リポジトリに含まれてたDemo.jsの中身をコピってみます。

https://gyazo.com/d6ce18deadab61313bf91b809744a59e

色々試してみた

import React, { Component } from 'react';

import { render, Window, App, TextInput, Dialog, Box, Button, Checkbox, Picker, ProgressBar, Text } from 'proton-native';

class Example extends Component {
  state = {
    formText: '',
  }

  render() {
    return (
      <App>
        <Window title="Example" height={500} width={500}>
          <Box>
            <TextInput stretchy={false} onChanged={(formText) => this.setState({ formText })}/>
            <Text>{this.state.formText}</Text>
            <Button onClicked={() => Dialog('Error', {title: "Button Clicked"})}>Button</Button>
            <Box padded height={100} vertical={false}>
              <TextInput stretchy={false} onChanged={(text) => Dialog('Error', {title: text})}/>
              <Button onClicked={() => Dialog('Error', {title: "Button Clicked"})}>Button</Button>
            </Box>
            <Checkbox>This is a checkbox</Checkbox>
            <Picker>
              <Picker.Item>Option 1</Picker.Item>
              <Picker.Item>Option 2</Picker.Item>
              <Picker.Item>Option 3</Picker.Item>
            </Picker>
            <ProgressBar value={-1} />
          </Box>
        </Window>
      </App>
    );
  }
}

render(<Example />);

https://gyazo.com/3858156a592e22b9e5772c6e55c0a74e

まとめ

React/ReactNativeのようなstyleは今のところ変更できないようです。

今後に期待ですね。