Link Parameter Utilities

Link parameters store a link to a project map node, a static URL, an email address, or a telephone number, plus an optional set of editor-set custom attributes (such as target, rel, class, or data-*). For how to configure a link parameter and how Uniform stores its value, see the Link parameter reference.

The SDK provides helpers that turn a stored link value into renderable attributes, so you don't have to derive the href or handle security concerns yourself.

To render a link value, use linkParamValueToAnchorProps from @uniformdev/canvas-react (React) or linkParamValueToHtmlAttributes from @uniformdev/richtext (Vue, Nuxt, or any channel that produces HTML strings). Both helpers derive the href (including the mailto:/tel: prefix and any anchor), spread the editor-set attributes, and apply the built-in safeguards described below. All link types (project map nodes, static URLs, email addresses, and telephone numbers) are handled for you.

When the link is a project map node, the value stays valid even if the node is later moved elsewhere in the project map, and you can read the nodeId, dynamicInputValues, and projectMapId from the value.

The following InternalLink component renders any link type with the framework's native link component (Next.js Link or NuxtLink):

/src/components/InternalLink.tsx

import Link from "next/link"; import { LinkParamValue } from "@uniformdev/canvas"; import { linkParamValueToAnchorProps } from "@uniformdev/canvas-react"; export default function InternalLink({ title, internalLink, }: { title: string; internalLink: LinkParamValue; }) { // If no link is set just render an anchor link - change to fit your needs if (!internalLink) { return <a href="#">{title}</a>; } // If the link is a project map node, we can get the node id, dynamic input values, and project map id if (internalLink.type === "projectMapNode") { const nodeId = internalLink.nodeId; const dynamicInputValues = internalLink.dynamicInputValues; const projectMapId = internalLink.projectMapId; } // Derive href and any editor-set attributes (target, rel, class, data-*, ...) // next/link requires href as its own prop const { href, ...anchorProps } = linkParamValueToAnchorProps(internalLink); return ( <Link href={href ?? "#"} {...anchorProps}> {title} </Link> ); }

/components/InternalLink.vue

<script lang="ts" setup> import { type LinkParamValue } from '@uniformdev/canvas'; import { linkParamValueToHtmlAttributes } from '@uniformdev/richtext'; const props = defineProps<{ title: string; internalLink: LinkParamValue; }>(); // Derive href and any editor-set attributes (target, rel, class, data-*, ...) const { href, ...linkAttributes } = linkParamValueToHtmlAttributes(props.internalLink); </script> <template> <NuxtLink :href="href ?? '#'" v-bind="linkAttributes"> {{ title }} </NuxtLink> </template>

note

For plain React, spread the result directly onto an <a> element: <a {...linkParamValueToAnchorProps(link)}>{label}</a>.

The helpers apply two behaviors automatically:

  • target="_blank" gets rel="noopener noreferrer" added, unless the editor set rel explicitly.
  • The dangerous attributes (href, src, style, formaction, or any on* handler such as onclick) are dropped silently, as are attribute values with a javascript: scheme. The href is always derived from the link value, never from an attribute.

In React output, a class attribute is translated to className.

ExportPackageDescription
linkParamValueToAnchorProps@uniformdev/canvas-reactConvert a link value to React anchor props (class becomes className)
linkParamValueToHtmlAttributes@uniformdev/richtextConvert a link value to a sanitized HTML attribute record (href plus custom link attributes)
linkParamValueToHref@uniformdev/richtextConvert a link value to a href string (adds the mailto:/tel: prefix for email and telephone links)
Last modified
Next
Rich Text Parameter Utilities