Muser

中文

A Canvas Componentization Framework to Help You Build Complex UI.

• Componentization
• High Performance
• Easy to Use

This repo is still under development. If you encounter any issues, please feel free to contact me. Additionally, you are welcome to participate in the development together.

Install

npm install muser

or

yarn add muser

Usage

import { Element, useElement, Brush } from 'muser';
import ChildrenElement from 'src/components/children-element';

export default class App extends Element<{ value: string }> {
  state = { width: 10, color: 'green' };

  render({ state, props }: App) {
    const child = useElement(ChildrenElement, {
      width: 100,
      height: 100,
      key: 'key-of-child-element',
    });

    // re-render when 'width' or 'value' or 'color' was changed
    return ({ rect }: Brush) => {
      const { width, color } = state;
      const { value } = props;

      rect([0, 0, width, width], { fillStyle: color });

      child({ value })
        .paste({  x: 0, y: 0 });
    };
  }
}

const app = new App({ width: 100, height: 100 });
app.init({ value: 'hello world!' });

Document

See Document