Give each parameter the type ComponentParameter<T>:
components/hero.tsx
import {
type ComponentParameter,
type ComponentProps,
UniformRichText,
UniformText,
} from "@uniformdev/next-app-router/component";
import type { ParameterRichTextValue } from "@uniformdev/richtext";
type HeroParameters = {
title?: ComponentParameter<string>;
description?: ComponentParameter<ParameterRichTextValue>;
};
export const HeroComponent = ({
parameters: { title, description },
component,
}: ComponentProps<HeroParameters>) => (
<section>
{title ? <UniformText component={component} parameter={title} as="h1" placeholder="Enter a title" /> : null}
{description ? (
<UniformRichText component={component} parameter={description} placeholder="Enter a description" />
) : null}
</section>
);
UniformText and UniformRichText require a parameter object. Thus the example renders them only when the parameter exists.
warning
Make all parameters optional with ?. A parameter can be undefined at runtime, also when the component definition marks it as required. For example, an author adds a component and does not fill in its parameters.
To read the value of a parameter, use the value property:
UniformText renders a text parameter. In Canvas, authors can edit the text in the page.
<UniformText
component={component} // Required: the ComponentContext from props
parameter={title} // Required: a ComponentParameter<string>
as="h1" // Optional: the HTML element (default: "span")
className="text-xl" // Optional: HTML attributes go to the element
placeholder="Enter a title" // Optional: the text in Canvas when the value is empty
isMultiline={false} // Optional: multi-line edit (default: false)
render={(value) => value?.toUpperCase()} // Optional: changes the value before render
/>
UniformText renders nothing when the parameter is missing or is not a text parameter. It also applies conditional values that use quirks. It is a client component.
<UniformRichText
component={component} // Required: the ComponentContext from props
parameter={description} // Required: a ComponentParameter<ParameterRichTextValue>
as="div" // Optional: the wrapper element (default: "div")
className="prose" // Optional: HTML attributes go to the wrapper
placeholder="Enter text" // Optional: the text in Canvas when the value is empty
resolveRichTextRenderer={customResolver} // Optional: custom node renderers
/>
The default link renderer adds the custom link attributes and anchors that authors set. If you replace the link node renderer, use linkParamValueToAnchorProps from @uniformdev/richtext to keep this behavior. Refer to rich text parameter utilities.
A slot has the items in slot.items. An item can be null. UniformSlot does not check for null items, and throws an error for one. getUniformSlot and the example below skip them: