If you haven't already, run through our developer quickstart to get your development environment ready to use Mason.
Mason features take a number of user-defined properties.
id
- a 24 byte string from the Mason Builder export modal (required)
willFetchData - a function invoked before datasource fetching (optional)
willSendData - a function invoked before form submission (optional)
didReceiveData - a function invoked after form submission (optional)
Mason features use React under the hood, and integrate easily with a React codebase.
import React, { Component } from 'react';import { Canvas } from '@mason-api/react-sdk';class MyRegister extends Component {render() {return <Canvas id="YOUR_COMPONENT_ID" />;}}
If you're including Mason features as HTML Custom Elements, you must pass your props as data attributes.
<html><head><script src="https://static.trymason.com/mason@latest.js"></script></head><body><mason-canvas data-id="YOUR_COMPONENT_ID"></mason-canvas></body></html>
Because you can't pass functions as HTML attributes, you must use event subscribers to utilize callbacks with your HTML feature. See Sending Data, Fetching Data, and Handling Errors for examples.