Initialization

To initialize Mason you must first set your API Key, which you can retrieve from your account profile.​

The Mason init function is the default export from mason-library - see the example below for its signature. It serves two purposes, the first is to set your API Key, which will be used in all calls to the Mason API to retrieve your feature configurations. The second is to set any Component IDs you'd like to use. You may call the init function as many times as you want throughout your application.

React

import React from 'react';
import Mason from 'mason-library';
​
class App extends React.Component {
    componentDidMount() {
        Mason({ 
            apiKey: 'YOUR_API_KEY',
            componentIds: [...],    
        });
    }
    
    ...
}

The componentIds argument - an array of strings - tells Mason which components you'd like to use in your app, and they will be loaded immediately. If you have a single-page application, it's best to fetch all of them when your app mounts, so your components can render immediately. You may, however, do subsequent calls to Mason and add new Component IDs at any time.

HTML Custom Element

In the HTML version, you do not need to include any Component IDs. The Mason script will find any Mason components as soon as the DOM is ready and automatically fetch them.

<script src="https://static.trymason.com/mason@latest.js"></script>
​
<mason-login data-id="YOUR_COMPONENT_ID"></mason-login>
<script type="text/javascript">
    window.masonAsyncInit = function() {
        Mason({ apiKey: 'YOUR_API_KEY' });
    };
</script>
​