• Stars
    star
    114
  • Rank 308,031 (Top 7 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created almost 5 years ago
  • Updated almost 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Use React and CSS to build UI interfaces on canvas


npm version

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')
)

Edit purple-browser-h56ht

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" />
  }
}

Edit reverent-river-vbypp

Render to a custom canvas api

DEMO

Other Framework

More Repositories

1

mobx-persist

persist mobx stores
TypeScript
561
star
2

react-native-webview-invoke

Invoke functions between React Native and WebView
JavaScript
232
star
3

three-typescript-starter

Three.js + Typescript + Webpack Boilerplate
TypeScript
109
star
4

react-native-shadow-view

React Native's View Component with Shadows Both on Android and iOS, inspired by react-native-shadow
TypeScript
35
star
5

yoga-layout-wasm

yoga-layout webassembly module
C++
28
star
6

GLMultiCameraPreviewDemo

Android multiple camera preview surface with offscreen rendering and GPU filter powered by android-gpuimage-plus. 安卓相机多预览,外加离屏渲染和GPU滤镜 (来自 android-gpuimage-plus) 示例
Java
14
star
7

coverage-shaker

Minify JavaScript code from chrome/puppeteer coverage report. tree shaking.
TypeScript
11
star
8

react-native-emoji-rain

React native emoji rain component use react hooks - inspired by WeChat emoji rain
JavaScript
10
star
9

flutter_tencentmusician

An unofficial app for tencent musician using Flutter | 用Flutter实现的腾讯音乐人后台
Dart
5
star
10

mil.

TypeScript版冲顶大会、百万xx等辅助答题程序(还在开发中,预计今晚搞定吧)
TypeScript
3
star
11

apollo-client-tsx-starter-kit

React Webpack TypeScript Apollo Client Side Boilerplate For GraphQL API
JavaScript
2
star
12

five

An example app with firebase JSSDK + React Native + Redux
JavaScript
2
star
13

simple-tsx-starter-kit

Minimal React Webpack TypeScript Boilerplate
JavaScript
1
star
14

SShareNS3

Simulation of an ad-hoc Semantic Web Data System based on NS3
C++
1
star
15

react-native-webviewbridge-invoke

react-native-webview-invoke for react-native-webview-bridge
JavaScript
1
star