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 } from 'muser';
import ChildrenElement from 'src/components/children-element';

export default class HelloWord extends Element {
  state = { width: 10, color: 'green' };

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

    return [
      // re-render when 'width' and 'value' was changed
      (context) => {
        const { width } = state;
        const { value } = props;

        context.fillRect(0, 0, width, width);
        child({ value })
          .paste({  x: 0, y: 0 });
      },
      // re-render when 'color' was changed
      (context) => {
        const { color } = state;

        context.fillStyle = color;
        context.fillRect(0, 0, width, width);
      },
    ];
  }
}

Document

See Document