hhy5277 / react-yue

Render the views of Yue with React.

react-yue

This is a lib to help you render the View of Yue in the react way.

Moreover, it's possible to utilize react-yue to a hot reload developing experience.

You may want to check do-space-client and react-yue-app as examples of using this lib.

mac

Get Started

Use node v8 or v9 as they are supported by the builds of gui.

npm i react-yue react gui

Render your view into a container:

import React from 'react'
import gui from 'gui'
import { render } from 'react-yue'

// Create your react component:
function App() {
  return (
    <container
      style={{
        flexDirection: 'row',
        flex: 1,
        justifyContent: 'center',
      }}
    >
      <label
        text="hello"
      />
    </container>
  )
}

// Create a window and a root container:
const win = gui.Window.create({})
win.setContentSize({ width: 400, height: 250 })

const contentView = gui.Container.create()
contentView.setStyle({ flexDirection: 'row' })
win.setContentView(contentView)
win.center()
win.activate()

// Create your react elements and render them:
render(<App />, contentView)

// Start your app
if (!process.versions.yode) {
  gui.MessageLoop.run()
  process.exit(0)
}

Check this ES5 example if you want to run it without any code transforming:

const React = require('react')
const gui = require('gui')
const { render } = require('react-yue')

// Create your react component:
function App() {
  return React.createElement('container', {
    style: {
      flexDirection: 'row',
      flex: 1,
      justifyContent: 'center',
    },
  }, React.createElement('label', {
    text: 'hello',
  }))
}

// Create a window and a root container:
const win = gui.Window.create({})
win.setContentSize({ width: 400, height: 250 })

const contentView = gui.Container.create()
contentView.setStyle({ flexDirection: 'row' })
win.setContentView(contentView)
win.center()
win.activate()

// Create your react elements and render them:
render(React.createElement(App), contentView)

// Start your app
if (!process.versions.yode) {
  gui.MessageLoop.run()
  process.exit(0)
}

Style / Layout

Yue use yoga layout and you can use these properties in the style property. It's also possible to provide other styles via the style prop.

• color: hex|rgb|rgba|hsl|hsla|name of a color
• backgroundColor: hex|rgb|rgba|hsl|hsla| name of a color
• fontSize: number representing a pixel value
• fontWeight: supports 100-900 and all values in https://libyue.com/docs/latest/js/api/font_weight.html
• fontFamily: name of a font to use
• fontStyle: normal|italic
• textAlign: left|center|right
• verticalAlign: top|middle|bottom

import React from 'react'

export default function MyComp() {
  return (
    <container
      style={{
        flex: 1,
        flexDirection: 'row',
        backgroundColor: 'black'
      }}
    >
      <container
        style={{
          justifyContent: 'center',
        }}
      >
        <label
          text="hello"
          style={{
            color: 'white',
            fontSize: 14
          }}
        />
      </container>
    </container>
  )
}

Components

Below are what components and their props you can use with react-yue. For more details, please check the official document.

View (base class)

props:

• Boolean visible
• Boolean enabled
• Boolean focusable
• Boolean mouseDownCanMoveWindow

events:

• onMouseDown
  • params
    • View self
• onMouseUp
  • params
    • View self
    • MouseEvent event
• onMouseMove
  • params
    • View self
    • MouseEvent event
• onMouseEnter
  • params
    • View self
    • MouseEvent event
• onMouseLeave
  • params
    • View self
    • MouseEvent event
• onKeyDown
  • params
    • View self
    • KeyEvent event
• onKeyUp
  • params
    • View self
    • KeyEvent event
• onSizeChanged
  • params
    • View self
    • KeyEvent event
• onCaptureLost
  • params
    • View self
    • KeyEvent event

Button

props:

• Button::Type type
• Boolean defaultChecked
• String title
• Image image

events:

• onClick(self)
  • params
    • Button self

Container

events:

• onDraw(self, painter, painter)
  • params
    • Container self
    • Painter painter - The drawing context of the view.
    • RectF dirty - The area in the view to draw on.

Entry

props:

• Entry::Type type
• String text

events:

• onTextChange(self)
  • params
    • Entry self
• onActivate(self)
  • params
    • Entry self

Group

props:

• String title
• View children

Label

props:

• String text

ProgressBar

props:

• Number percent
• Boolean indeterminate

Scroll

props:

• Scroll::Policy hpolicy
• Scroll::Policy vpolicy
• Boolean overlayScrollbar
• SizeF size contentSize
• View children

TextEdit

props:

• String text
• Scroll::Policy hpolicy
• Scroll::Policy vpolicy
• Boolean overlayScrollbar

events:

• onTextChange(self)
  • params
    • TextEdit self

Vibrant

props:

• Vibrant::Material material
• Vibrant::BlendingMode mode

Using with yackage

React will require its modules dynamically so that you can't correctly package your apps when using yackage to package your Node.js project into an executable.

As yackage doesn't support customized code transforming, webpack is recommended to bundle your js correctly. You can take the config of do-space-client as a reference.

Run Tests

npm run test