If

The <If> component lets you show or hide content based on which product or version the reader is viewing, or their role if your docs use authentication.

Variants

By product

Use the products prop to show content only when the reader is viewing a specific product. Each value matches a product by its display name, its slug, or its id.

1
<If products={["orchids"]}>
2
  This content only appears when viewing the orchids product.
3
</If>
4
5
<If products={["orchids", "succulents"]}>
6
  This content appears in both the orchids and succulents products.
7
</If>

By version

Use the versions prop to show content only when the reader is viewing a specific version. Each value matches a version by its display name, its slug, or its id. The default version is served at your docs basepath and has no slug of its own, so target it by its display name.

1
<If versions={["v1"]}>
2
  This content only appears in version v1.
3
</If>
4
5
<If versions={["v2"]}>
6
  This content only appears in version v2.
7
</If>
8
9
<If versions={["v1 (Legacy)"]}>
10
  This content only appears in the version whose `display-name` is `v1 (Legacy)`.
11
</If>

By role

Use the roles prop to show content based on the role of an authenticated user. The values in the roles array correspond to the roles defined in your role-based access control configuration.

1
<If roles={["admin"]}>
2
  This content is only visible to admins.
3
</If>

Combining conditions

You can combine products, versions, and roles props on a single <If> component. When multiple props are specified, all conditions must match.

1
<If products={["orchids"]} versions={["v2"]}>
2
  This content only appears in the orchids product when viewing version v2.
3
</If>
4
5
<If products={["succulents"]} roles={["beta-users"]}>
6
  This content only appears in the succulents product for beta users.
7
</If>

Inverting conditions

Use the not prop to invert any condition, showing content when the condition doesn’t match.

1
<If products={["legacy"]} not>
2
  This content appears in every product except legacy.
3
</If>
4
5
<If versions={["v1"]} not>
6
  This content appears in every version except v1.
7
</If>

Properties