This section provides information on how to programmatically interact with the process used to render components and compositions defined using Uniform Canvas.
When a Canvas component has slots, it's expected that the components in the slot will be rendered in the front-end application. Each Canvas component must be mapped to a component type that's compatible with the front-end technology used. You must provide the mapping for Uniform.
This example demonstrates how to define the mapping and assign it to the component that controls the rendering process.
As <UniformSlot /> component doesn't import FE components directly, we need to import them manually here to include them to the bundle and run our registerUniformComponent()
import './HeroComponent';
// Optionally you can override default fallback component - DefaultNotImplementedComponent
// Useful when your component mapping is not simple 1-to-1 relation
import { registerUniformComponent, NOT_IMPLEMENTED_COMPONENT } from "@uniformdev/canvas-react";
const MyNotImplementedComponent = (props) => {
return (
<div>COMPONENT {<code>{props.component.componentType}</code>} NOT IMPLEMENTED</div>
);
}
registerUniformComponent({
type: NOT_IMPLEMENTED_COMPONENT,
component: MyNotImplementedComponent,
});
You still need to import canvasComponents.js to include all the components, such as in NextJS _app.js is the best place for it.
During the composition rendering process, Uniform generates markup. By default, the markup is surrounded by a <code>div</code> tag. This tag can cause problems with certain forms of CSS.
This example demonstrates how to prevent this extra markup from being generated.
import Head from 'next/head'
import { UniformComposition, UniformSlot } from '@uniformdev/canvas-react'
function resolveRenderer(component) {
...
}
export default function Home({ composition }) {
return (
<UniformComposition data={composition} resolveRenderer={resolveRenderer} behaviorTracking="onLoad">
<div>
<Head>
<title>Example</title>
</Head>
<main>
<UniformSlot name='body' />
</main>
</div>
</UniformComposition>
)
}
Sometimes you may want to control how a slot renders its children. For example, the popular slider library Swiper requires you to wrap slides with <SwiperSlide /> component. Each slide should be the immediate child of the parent <Swiper /> component. To achieve this in Uniform you can use the wrapperComponent prop of the <UniformSlot /> component.