Pages

Features may contain multiple pages, and you can control which page is displayed using the configSubpath property when rendering your feature.
Rendering a specific page
By default, your feature will render the default page - the first page that every feature contains. You may specific "default" or any other page name by supplying the camel-cased page name. The feature below will render "Page One".
React
1
import React from 'react';
2
import { Canvas } from '@mason-api/react-sdk';
3
​
4
function MyRegister() {
5
    return <Canvas id="YOUR_COMPONENT_ID" configSubpath="pageOne" />;
6
}
Copied!
JavaScript
1
<html>
2
    <head>
3
        <script src="https://static.trymason.com/[email protected]"></script>
4
    </head>
5
    <body>
6
        <mason-canvas data-id="YOUR_COMPONENT_ID" data-config-subpath="pageOne"></mason-canvas>
7
    </body>
8
</html>
Copied!
You may update the configSubpath prop at any time to change the rendered page.
Subscribing to page changes
If you're using React, you may provide a didChangePage prop to be notified of page changes. This allows you to do things like sync browser history, or keep multiple features in sync.
1
import { Canvas } from '@mason-api/react-sdk';
2
​
3
function MyRegister() {
4
    return <Canvas id="YOUR_COMPONENT_ID" didChangePage={(page) => {
5
        // do something with page
6
    }} />;
7
}
Copied!
Note that didChangePage will only be called for internal page changes - such as a user clicking a page link, or a form success event causing a page event. Changing the configSubpath prop will not cause your function to be called.

Development - Previous

Embedding

Next - Development

Forms: Sending Data

Last modified 2yr ago

Copy link

Contents

Rendering a specific page

Subscribing to page changes