Embedding

Last updated 2 months ago

Learn how to include your Mason features in your application.

If you haven't already, run through our developer quickstart to get your development environment ready to use Mason.
Props
Mason features take a number of user-defined properties. 
id - a 12 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)
React
Mason features use React under the hood, and integrate easily with a React codebase.
import React from 'react';
import { Register } from 'mason-library';
​
class MyRegister extends React.Component {
    render() {
        return <Register id="YOUR_COMPONENT_ID" />;
    }
}
HTML Custom Elements
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-login data-id="YOUR_COMPONENT_ID"></mason-login>
    </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.

Development - Previous

Initialization

Next - Development

Sending Data