Render
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.
import { Render } from "~/components";
<Render file="hello" params={{ name: "world", link: "/style-guide/components/render/"}} />{/*Hello, {props.name}!
Hello `{props.name}`
Hello <code>{props.name}</code>
[link]({props.link})
<a href={props.link}>link</a>*/}file string: 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 string (optional): By default, it will look for partials in the same product folder as the current page.
You can use this to specify a different product.
params object (optional): If you wish to substitute values inside your partial, you can use pass params which can be
referenced in your partial. Refer to params.
Partials only have one optional frontmatter property, which is params. This takes an array of strings,
which should be the expected parameters. When this is defined, but those parameters are not passed, an error
will be thrown.
---params: - name - foo - bar---
Hello, {props.name}!
Hello, {props.foo}!
Hello, {props.bar}!In the above example, you will notice there is:
- A
paramsinput on theRendercomponent. - A
paramsproperty in the frontmatter. - A reference to
props.name.
When using the params input on the Render component, you can write a JavaScript object ↗
which is later available inside the partial.
The params frontmatter property on a partial expects an array of strings, containing the "expected parameters". This is so that if
your partial requires parameters to be passed, and none are passed, we can warn the user.
The way that you can access these parameters is with the props object, surrounded in curly braces {}.
This is a JavaScript expression within MDX ↗.