Introduction

At first we should define enum and interface for creation decorators.

enum ERenderer {
    string,
    number,
    bool
}

interface IFormInputProps {
    title?: string;
    validation?(val: any): string | undefined;
}

After that create Factory instance for generate decorators in renderers.

import { Factory } from 'react-model-renderer';
const factory = new Factory<ERenderer, IFormInputProps>();

Definition decorators factory

const D = factory.create({
    string: ERenderer.string,
    number: ERenderer.number,
    bool: ERenderer.bool,
});

Create models

Let's create model with mobx

import { observable } from 'mobx'
class Form {
    @D.string({ title: 'Name' })
    @observable
    name = '';

    @D.number({ title: 'Money' })
    @observable
    money = 0;
}

Create renders

Define renderes

import { reconsiler } from 'react-model-renderer';
import set from 'lodash/set';
const renderer = factory.createRender<Form>(reconsiler, {
    set,
    resolveComponent
})

Define resolveComponent

function resolveComponent(ttype?: ERenderer, _meta?: IFormInputProps) {
  if (!ttype) {
    return null;
  }
  return ResolvingComponent;
}