Canvas

KS
Last updated 4 months ago

A blank canvas - create whatever you like!

Mason Canvas is a blank feature, but it can do much more than display static content. Send data using forms, and fetch and map data to create dynamic UI.

Sending Data

Add a Form element, add fields, provide an action and method, and you can send JSON to any server. See Sending Data for more details.

Fetching Data

Create dynamic UIs by adding datasources and mapping their responses to the UI elements you add. Map text, images, and input values. See Fetching Data for more details.

Example

import React from 'react';
import { Canvas } from 'mason-library';
class MyFeature extends React.Component {
constructor(props) {
super(props);
this.state = {
success: false
};
}
render() {
const id = this.state.success ? 'SUCCESS_COMPONENT_ID' : 'DEFAULT_COMPONENT_ID';
return <Canvas id={id} didReceiveData={() => this.setState({ success: true })} />;
}
}