Render

The Render component is used 4038 times on 1943 pages.

See all examples of pages that use Render

Used 4038 times.

Pages

Partials

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

Hello, world!

import { Render } from "~/components";

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

Inputs

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

This should be the folder within src/partials.
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 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. If a property is optional, such as for conditional content, add a ? to the end of the name.

---
params:
  - product
  - deprecated?
---

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

simple-props.mdx

---
params:
  - name
---

Hello, {props.name}!

Hello, world!

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

strong-in-props.mdx

---
params:
  - dont
  - do
---

**Don't do this!**

{props.dont}

**Do this!**

<strong>{props.do}</strong>

Don't do this!

**Text**

Do this!

Text

import { Render } from "~/components";

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

Links

link-in-props.mdx

---
params:
  - link
---

**Don't do this!**

This will link to `/style-guide/components/%7Bprops.link%7D`.

[Markdown link]({props.link})

**Do this!**

This will link to `style-guide/components/render/#links`.

<p>
  <a href={props.link}>JSX link</a>
</p>

Don't do this!

This will link to /style-guide/components/%7Bprops.link%7D.

Markdown link

Do this!

This will link to style-guide/components/render/#links.

JSX link

import { Render } from "~/components";

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

Images

image-in-props.mdx

---
params:
  - image
---

**Don't do this!**

`![Alt text]({props.image})`

**Do this!**

<img src={props.image} alt="Alt text" />

Don't do this!

![Alt text]({props.image})

Do this!

import { Render } from "~/components";

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

Code blocks

code-in-props.mdx

---
params:
  - code
---

import { Code } from "~/components";

#### Inline

**Don't do this!**

`{props.code}`

**Do this!**

<p>
  <code>{props.code}</code>
</p>

<hr />

#### Codeblocks

**Don't do this!**

```js
{
  props.code;
}
```

**Do this!**

<Code code={props.code} lang="js" />

Inline

Don't do this!

{props.code}

Do this!

export const foo = 'bar';

Codeblocks

Don't do this!

{
  props.code;
}

Do this!

export const foo = 'bar';

import { Render } from "~/components";

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

Properties to render content conditionally

Anything that you can represent in a JavaScript expression can be used in your conditional logic.

This may be the and (&&) operator ↗ or ternary (? ... : ... ) operator ↗, the below example uses both.

optional-props.mdx

---
params:
  - product
  - deprecated?
---

{
props.deprecated && (
<p>
<strong>
{props.product} is deprecated, please use alternative products.
</strong>
</p>
)
}

{
props.product === "Thing Three" ? (
<p>Welcome to our Thing Three launch countdown!</p>
) : (
<p>Welcome to the {props.product} landing page.</p>
)
}

Thing is deprecated, please use alternative products.

Welcome to the Thing landing page.

Welcome to the Thing Two landing page.

Welcome to our Thing Three launch countdown!

import { Render } from "~/components";

<Render
  file="optional-props"
  product="style-guide"
  params={{ product: "Thing", deprecated: true }}
/>

<hr />

<Render
  file="optional-props"
  product="style-guide"
  params={{ product: "Thing Two" }}
/>

<hr />

<Render
  file="optional-props"
  product="style-guide"
  params={{ product: "Thing Three" }}
/>