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.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/[email protected]"></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.Last modified 3yr ago