diff --git a/src/content/docs/style-guide/components/render.mdx b/src/content/docs/style-guide/components/render.mdx index 23069da3b383d66..998091194bd37eb 100644 --- a/src/content/docs/style-guide/components/render.mdx +++ b/src/content/docs/style-guide/components/render.mdx @@ -89,3 +89,53 @@ your partial requires parameters to be passed, and none are passed, we can warn The way that you can access these parameters is with the `props` object, surrounded in curly braces `{}`. This is a [JavaScript expression within MDX](https://mdxjs.com/docs/using-mdx/#props). + +## Dynamic (flexible) content in partials + +As partials are authored in MDX, they are able to use JavaScript expressions based on the `params` passed in. + +```mdx +--- +params: + - product +--- + +Generic content. + +{/* If `params={{ product: "Magic WAN" }}` is passed, this will result in `Content specific to Magic WAN only.` */} +{ props.product === "Magic WAN" &&

Content specific to Magic WAN only.

} +``` + +Within JavaScript expressions, HTML or components must be used. + +For example, when `params={{ path: "/foo/" }}` is provided: + +```mdx +--- +params: + - path +--- + +{/* ❌ - will link to the literal string `{props.path}` */} +[link]({props.path}) + +{/* ✅ - will link to `/foo/` */} +link +``` + +For this reason, the [`Markdown`](/style-guide/components/markdown/#example-for-variables-in-partials) component is available. + +```mdx +--- +params: + - name +--- + +import { Markdown } from "~/components"; + +{/* If `params={{ name: "Cloudflare" }}` is passed, this will result in `Hello Cloudflare` */} +{/* If `params={{ name: "NotCloudflare" }}` is passed, this will result in `Goodbye NotCloudflare` */} +{ name === "Cloudflare" ? : } +``` + +More examples of using JSX are available in the [mdxjs.org documentation](https://mdxjs.com/docs/what-is-mdx/#expressions). \ No newline at end of file