Nesting Components
Inject custom functionality by providing any React Component as a child to your Mason Component
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.
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.
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} />;
}
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} />;
}
Last modified 3yr ago