React-yue NPM | npm.io

react-yue

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

Get Started

npm i react-yue react gui

Render your view into a container:

const React = require('react')
const gui = require('gui')
const { render } = require('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)
}

Components

View (base class)

props:

Boolean visible
Boolean enabled
Boolean focusable
Boolean mouseDownCanMoveWindow
Font font
Color color
Color backgroundColor

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.