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 useComponent from 'mson-react/lib/use-component';
import Typography from '@material-ui/core/Typography';

const ReactCustomComponent = (props) => {
  const { name, label } = useComponent(props.component, ['name', 'label']);
  return (
    <div>
      <Typography variant="h3">Name: {name}</Typography>
      <Typography variant="h4">Label: {label}</Typography>
    </div>
  );
};

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

Or, for an example that uses only JavaScript, see custom-component-js.