# Link Parameter Utilities

> How to render link parameters in Uniform components across frameworks.

Source: https://docs.uniform.app/docs/sdk/parameter-utilities/link-parameters

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](https://docs.uniform.app/docs/guides/models/components/parameters#link).

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.

## Rendering a link value

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`](https://nextjs.org/docs/api-reference/next/link) or [`NuxtLink`](https://nuxt.com/docs/api/components/nuxt-link)):

**Next.js**

`/src/components/InternalLink.tsx`

```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>
  );
}
```

**Nuxt**

`/components/InternalLink.vue`

```html
<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>`.

## Built-in safeguards

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`.

## Import reference

| Export | Package | Description |
| --- | --- | --- |
| `linkParamValueToAnchorProps` | `@uniformdev/canvas-react` | Convert a link value to React anchor props (`class` becomes `className`) |
| `linkParamValueToHtmlAttributes` | `@uniformdev/richtext` | Convert a link value to a sanitized HTML attribute record (`href` plus custom link attributes) |
| `linkParamValueToHref` | `@uniformdev/richtext` | Convert a link value to a `href` string (adds the `mailto:`/`tel:` prefix for email and telephone links) |