Render

import { Code, Details, Type, MetaInfo } from "~/components";

The Render component allows us to include a "partial", a reusable Markdown snippet, onto a page.

It also accepts parameters that can be used as variables within the partial, so that even content which needs slight differences between usages can be turned into a partial.

Component

import { Render } from "~/components";

<Render
	file="simple-props"
	product="style-guide"
	params={{
		name: "world",
	}}
/>

Inputs

• file

  This should be the name of the partial, without the containing directory or file extension. For example, /partials/style-guide/hello.mdx would be file="hello".

• product

  This should be the folder within src/partials.

• params

  If you wish to substitute values inside your partial, you can use pass params which can be referenced in your partial. Refer to properties.

Properties

Defining expected properties in frontmatter

Anything defined in the params property of the Render component is available inside the partial, using JavaScript expressions.

To protect against required properties being missed, any partial that relies on params should also define params in the partial's frontmatter. This should be an array of strings, matching the property names you expect.

---
params:
  - product
---

:::note Partials must use params only for simple value substitution (for example, {props.name}). Do not use conditional or branching logic (such as &&, ternary ? :, or comparisons like ===) inside a partial. If content needs to differ between call sites, create a separate partial for each variation instead. :::

For each of the below examples, you can open the dropdown to view the partial's content.

Properties as a plain string

The below example would render Hello, world!.

import simpleRaw from "~/content/partials/style-guide/simple-props.mdx?raw";

import { Render } from "~/components";

<Render file="simple-props" product="style-guide" params={{ name: "world" }} />

Properties in Markdown syntax

When using JavaScript expressions, you are now "inside JSX" and cannot use traditional Markdown syntax. Similarly, you cannot use a JavaScript expression inside Markdown syntax.

Ideally, you should not use Markdown syntax, such as **strong** or [text](link), with properties. If using JSX is not feasible, there is a Markdown component that will take a text property.

The MDX documentation includes a mapping of common Markdown syntax to their equivalent JSX elements.

Strong

import strongRaw from "~/content/partials/style-guide/strong-in-props.mdx?raw";

import { Render } from "~/components";

<Render
	file="strong-in-props"
	product="style-guide"
	params={{ do: "Text", dont: "**Text**" }}
/>

Links

import linkRaw from "~/content/partials/style-guide/link-in-props.mdx?raw";

import { Render } from "~/components";

<Render
	file="link-in-props"
	product="style-guide"
	params={{
		link: "/style-guide/build-the-page/components/render/#links",
	}}
/>

Images

import imageRaw from "~/content/partials/style-guide/image-in-props.mdx?raw";

import { Render } from "~/components";

<Render
	file="image-in-props"
	product="style-guide"
	params={{ image: "/logo.svg" }}
/>

Code blocks

import codeRaw from "~/content/partials/style-guide/code-in-props.mdx?raw";

import { Render } from "~/components";

<Render
	file="code-in-props"
	product="style-guide"
	params={{ code: "export const foo = 'bar';" }}
/>