Custom JS Components

Custom components consist of 2 pieces:

1. A MSON-layer component that wraps the properties, e.g.

import compile from 'mson/lib/compiler/compile';

const CustomComponent = compile({
  component: 'UIComponent',
  name: 'CustomComponent',
  schema: {
    component: 'Form',
    fields: [
      {
        component: 'TextField',
        name: 'name',
      },
      {
        component: 'TextField',
        name: 'label',
      },
    ],
  },
});

2. A view-layer component for rendering, e.g. one written in React:

import React from 'react';
import attach from '../../attach';
import Typography from '@material-ui/core/Typography';

let ReactCustomComponent = (props) => {
  const { name, label } = props;
  return (
    <div>
      <Typography variant="h3">Name: {name}</Typography>
      <Typography variant="h4">Label: {label}</Typography>
    </div>
  );
};

// Bind React props to MSON component props
ReactCustomComponent = attach(['name', 'label'])(ReactCustomComponent);

See custom-component.js for a working example in the MSON Demo.