Initialization

Before using Mason you must initialize it with your API key.

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 the React SDK - 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 Project IDs you'd like to use - all Features in a a Project are deployed together and fetched in a single request when you init. You may call the init function as many times as you want throughout your application.

React

import React from 'react';
import Mason from '@mason-api/react-sdk';

class App extends React.Component {
    componentDidMount() {
        Mason({ 
            apiKey: 'YOUR_API_KEY',
            projectId: 'YOUR_PROJECT_ID',    
        });
    }
    
    ...
}

The projectId argument - a string or an array of strings - tells Mason which projects 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 Project IDs at any time.

HTML Custom Element

<script src="https://static.trymason.com/[email protected]"></script>

<mason-login data-id="YOUR_COMPONENT_ID"></mason-login>
<script type="text/javascript">
    window.masonAsyncInit = function() {
        Mason({
          apiKey: 'YOUR_API_KEY',
          projectId: 'YOUR_PROJECT_ID',
        });
    };
</script>

Multiple Project IDs

You may initialize multiple projects by providing an array of project ids, as shown below.

import React from 'react';
import Mason from '@mason-api/react-sdk';

class App extends React.Component {
    componentDidMount() {
        Mason({ 
            apiKey: 'YOUR_API_KEY',
            projectId: ['PROJECT_ID_1', 'PROJECT_ID_2'],    
        });
    }
    
    ...
}