Nesting Components

Inject custom functionality by providing any React Component as a child to your Mason Component

Custom Element

You may provide one Custom Element in any Mason Component. Drag out a Custom Element from the Elements sidebar and place it where you want your provided React Component to be rendered.

Styling

Note that the Custom Element will be replaced at runtime with your React Component, so any styles you add to it will have no effect. If you want to, for example, constrain its width, put it in a Container element and apply styles to that.

Passing in Component

At runtime, provide a children prop to your Mason Component.

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

export default function MyComponent(props) {
    const child = <MyCustomChild foo={'bar} />;
    return <Canvas id="YOUR_COMPONENT_ID" children={child} />;
}

Nesting Mason Components

You may provide a Mason Component as a child of another Mason Component if you want to reuse it in multiple places.

import { Canvas } from 'mason-library';

export default function MyComponent(props) {
    const child = <Canvas id="COMPONENT_ID_1" />;
    return <Canvas id="COMPONENT_ID_2" children={child} />;
}