If

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

Variants

By instance

Use the instance prop to show content only when the reader is viewing a specific instance. The values in the instance array correspond to the instance names defined in your docs.yml.

1
<If instance={["development"]}>
2
  This content only appears in the development instance.
3
</If>
4
5
<If instance={["production"]}>
6
  This content only appears in the production instance.
7
</If>

By product

Use the products prop to show content only when the reader is viewing a specific product. The values in the products array correspond to the product slugs defined in your docs.yml.

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. The values in the versions array correspond to the version slugs defined in your docs.yml.

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>

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