Documentation
  • Documentation
  • Development
    • Quickstart
    • Initialization
    • Embedding
    • Pages
    • Forms: Sending Data
    • Datasources: Fetching Data
    • Mapping Data
    • Custom event listeners
    • URL Parameters
    • Handling Errors
    • Security
    • Nesting Components
  • 3rd-Party Integrations
    • reCAPTCHA
    • Stripe
Powered by GitBook
On this page
  • Props
  • React
  • HTML
  1. Development

Embedding

Learn how to include your Mason features in your application.

PreviousInitializationNextPages

Last updated 5 years ago

If you haven't already, run through our to get your development environment ready to use Mason.

Props

Mason features take a number of user-defined properties.

  • id - a 24 byte string from the export modal (required)

  • - a function invoked before datasource fetching (optional)

  • - a function invoked before form submission (optional)

  • - a function invoked after form submission (optional)

React

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" />;
    }
}

HTML

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 and for examples.

Sending Data,
Fetching Data,
Handling Errors
developer quickstart
Mason Builder
willFetchData
willSendData
didReceiveData