Muse

中文

A Canvas Componentization Framework to Help You Build Complex UI.

• Componentization
• High Performance
• Easy to Use

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