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
  • Rendering a specific page
  • Subscribing to page changes
  1. Development

Pages

Control the page rendered, and get notified on page change.

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

import React from 'react';
import { Canvas } from '@mason-api/react-sdk';

function MyRegister() {
    return <Canvas id="YOUR_COMPONENT_ID" configSubpath="pageOne" />;
}

JavaScript

<html>
    <head>
        <script src="https://static.trymason.com/mason@latest.js"></script>
    </head>
    <body>
        <mason-canvas data-id="YOUR_COMPONENT_ID" data-config-subpath="pageOne"></mason-canvas>
    </body>
</html>

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.

import { Canvas } from '@mason-api/react-sdk';

function MyRegister() {
    return <Canvas id="YOUR_COMPONENT_ID" didChangePage={(page) => {
        // do something with page
    }} />;
}

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.

PreviousEmbeddingNextForms: Sending Data

Last updated 5 years ago