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 = const gui = const render = // Create your react component: { return <container style= flexDirection: 'row' flex: 1 justifyContent: 'center' > <label text="hello" /> </container> } // Create a window and a root container:const win = guiWindowwin const contentView = guiContainercontentViewwinwinwin // Create your react elements and render them: // Start your appif !processversionsyode guiMessageLoop process
Components
View (base class)
props:
Boolean
visibleBoolean
enabledBoolean
focusableBoolean
mouseDownCanMoveWindowFont
fontColor
colorColor
backgroundColor
events:
- onMouseDown
- params
View
self
- params
- onMouseUp
- params
View
selfMouseEvent
event
- params
- onMouseMove
- params
View
selfMouseEvent
event
- params
- onMouseEnter
- params
View
selfMouseEvent
event
- params
- onMouseLeave
- params
View
selfMouseEvent
event
- params
- onKeyDown
- params
View
selfKeyEvent
event
- params
- onKeyUp
- params
View
selfKeyEvent
event
- params
- onSizeChanged
- params
View
selfKeyEvent
event
- params
- onCaptureLost
- params
View
selfKeyEvent
event
- params
Button
props:
Button::Type
typeBoolean
defaultCheckedString
titleImage
image
events:
- onClick(self)
- params
Button
self
- params
Container
events:
- onDraw(self, painter, painter)
- params
Container
selfPainter
painter - The drawing context of the view.RectF
dirty - The area in the view to draw on.
- params
Entry
props:
Entry::Type
typeString
text
events:
- onTextChange(self)
- params
Entry
self
- params
- onActivate(self)
- params
Entry
self
- params
Group
props:
String
titleView
children
Label
props:
String
text
ProgressBar
props:
Number
percentBoolean
indeterminate
Scroll
props:
Scroll::Policy
hpolicyScroll::Policy
vpolicyBoolean
overlayScrollbarSizeF size
contentSizeView
children
TextEdit
props:
String
textScroll::Policy
hpolicyScroll::Policy
vpolicyBoolean
overlayScrollbar
events:
- onTextChange(self)
- params
TextEdit
self
- params
Vibrant
props:
Vibrant::Material
materialVibrant::BlendingMode
mode
Run Tests
npm run test