Skip to main content

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.

import Head from 'next/head'
import { CanvasClient } from '@uniformdev/canvas'
import { Composition, Slot } 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 UnknownComponent({ component }) {
return <div>[unknown component: {component.type}]</div>
}

function resolveRenderer({ type }) {
return UnknownComponent
}

export default function Home({ title, composition }) {
return (
<Composition data={composition} resolveRenderer={resolveRenderer}>
<div>
<Head>
<title>{title}</title>
</Head>

<main>
<Slot name='body' />
</main>
</div>
</Composition>
)
}
info

For more information, see the Composition component reference.

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.

import Head from 'next/head'
import { Composition, Slot } from '@uniformdev/canvas-react'

function resolveRenderer(component) {
...
}

export default function Home({ composition }) {
return (
<Composition data={composition} resolveRenderer={resolveRenderer} behaviorTracking="onLoad">
<div>
<Head>
<title>Example</title>
</Head>

<main>
<Slot name='body' />
</main>
</div>
</Composition>
)
}
info

For more information, see the Composition component reference.