Rendering
This section provides information on how to programmatically interact with process used to render components and compositions defined using Uniform Canvas.
Resolve renderer
When a Canvas component has slots, it is 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 is 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.
Using component registry
- React
- Vue
import { registerUniformComponent } from "@uniformdev/canvas-react";
export default function HeroComponent() {
return <div>Hero Component Content</div>
}
registerUniformComponent({
type: 'hero',
component: HeroComponent,
});
As <UniformSlot />
component does not 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,
});
Still need to import canvasComponents.js to include all our components,
e.g. in NextJS _app.js
is the best place for it.
import '../components/canvasComponents';
Using component resolver
- React
- Vue
import Head from 'next/head'
import { CanvasClient } from '@uniformdev/canvas'
import { UniformComposition, UniformSlot, DefaultNotImplementedComponent } from '@uniformdev/canvas-react'
export async function getStaticProps() {
const client = new CanvasClient({
apiKey: process.env.UNIFORM_API_KEY,
projectId: process.env.UNIFORM_PROJECT_ID,
})
const { composition } = await client.getCompositionBySlug({
slug: "/",
})
return {
props: {
title: "Example page",
composition,
}
}
}
function resolveRenderer({ type }) {
const components = {
// 'my_type': MyComponent,
};
return components[type] ?? DefaultNotImplementedComponent;
}
export default function Home({ title, composition }) {
return (
<UniformComposition data={composition} resolveRenderer={resolveRenderer}>
<div>
<Head>
<title>{title}</title>
</Head>
<main>
<UniformSlot name='body' />
</main>
</div>
</UniformComposition>
)
}
For more information, see the UniformComposition component reference.
Coming soon.
Control rendered markup
During the composition rendering process, Uniform generates markup.
By default, the markup is surrounded by a div
tag. This
tag can cause problems with certain forms of CSS.
This example demonstrates how to prevent this extra markup from being generated.
- React
- Vue
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>
)
}
For more information, see the UniformComposition component reference.
Coming soon.