pinqy520 / revas

Use React and CSS to build UI interfaces on canvas

Use React and CSS to build UI interfaces on canvas

Document | 中文文档 | Live DEMO | DEMO Code

Install

$ yarn add revas react

Usage

Render to a DOM

import React from 'react'
import {render, View, Text} from 'revas'

render(
  <View style={{ flex: 1 }}>
    <Text style={{ fontSize: 20 }}>Revas</Text>
  </View>,
  document.getElementById('container')
)

Render to a DOM rendered by React

import React from 'react'
import {render, View, Text} from 'revas'

export class Widget extends React.Component {
  componentDidMount() {
    this.app = render(
      <View style={{ flex: 1 }}>
        <Text style={{ fontSize: 20 }}>Revas</Text>
      </View>,
      document.getElementById('container'),
      this
    )
  }
  componentDidUpdate() {
    this.app.update()
  }
  componentWillUnmount() {
    this.app.unmount()
  }
  render() {
    return <div id="container" />
  }
}

Render to a custom canvas api

• https://github.com/pinqy520/revas-wxgame-example
• https://github.com/pinqy520/revas-bytegame-example

DEMO

Other Framework

• Vue - huruji/vuvas by @huruji