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.

Using component registry​

./components/HeroComponent.jsx
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()

./components/canvasComponents.js
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.

./pages/_app.jsx
import '../components/canvasComponents';

Using component resolver​

./pages/index.js
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>
  )
}
info

For more information, see the UniformComposition 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 { 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>
  )
}
info

For more information, see the UniformComposition component reference.

Last updated on