Features may contain multiple pages, and you can control which page is displayed using the configSubpath
property when rendering your feature.
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".
import React from 'react';import { Canvas } from '@mason-api/react-sdk';function MyRegister() {return <Canvas id="YOUR_COMPONENT_ID" configSubpath="pageOne" />;}
<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.
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.