Skip to content
Cloudflare Docs

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.

Component

Hello, world!

 
import { Render } from "~/components";


<Render file="simple-props" 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 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 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" 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" params={{ do: "Text", dont: "**Text**" }} />

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

Alt text 
import { Render } from "~/components";


<Render file="image-in-props" 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" 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" params={{ product: "Thing", deprecated: true }} />


<hr />


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


<hr />


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