feat: conditional render component

Jacky Zhao

2025-03-24 aaa5c8e8e40be33aec74c1cf0073ac081cb918fc

feat: conditional render component

 docs/layout-components.md

@@ -60,3 +60,25 @@
```typescript
Component.DesktopOnly(Component.TableOfContents())
```

## `ConditionalRender` Component

The `ConditionalRender` component is a wrapper that conditionally renders its child component based on a provided condition function. This is useful for creating dynamic layouts where components should only appear under certain conditions.

```typescript
type ConditionalRenderConfig = {
  component: QuartzComponent
  condition: (props: QuartzComponentProps) => boolean
}
```

### Example Usage

```typescript
Component.ConditionalRender({
  component: Component.Search(),
  condition: (props) => props.displayClass !== "fullpage",
})
```

This example would only render the Search component when the page is not in fullpage mode.

 quartz.layout.ts

@@ -17,7 +17,10 @@
// components for pages that display a single page (e.g. a single note)
export const defaultContentPageLayout: PageLayout = {
  beforeBody: [
    Component.Breadcrumbs(),
    Component.ConditionalRender({
      component: Component.Breadcrumbs(),
      condition: (page) => page.fileData.slug !== "index",
    }),
    Component.ArticleTitle(),
    Component.ContentMeta(),
    Component.TagList(),

 quartz/build.ts

@@ -21,7 +21,6 @@
import { randomIdNonSecure } from "./util/random"
import { ChangeEvent } from "./plugins/types"
import { minimatch } from "minimatch"
import { FileTrieNode } from "./util/fileTrie"

type ContentMap = Map<
  FilePath,

 quartz/components/ConditionalRender.tsx

New file
@@ -0,0 +1,22 @@
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"

type ConditionalRenderConfig = {
  component: QuartzComponent
  condition: (props: QuartzComponentProps) => boolean
}

export default ((config: ConditionalRenderConfig) => {
  const ConditionalRender: QuartzComponent = (props: QuartzComponentProps) => {
    if (config.condition(props)) {
      return <config.component {...props} />
    }

    return null
  }

  ConditionalRender.afterDOMLoaded = config.component.afterDOMLoaded
  ConditionalRender.beforeDOMLoaded = config.component.beforeDOMLoaded
  ConditionalRender.css = config.component.css

  return ConditionalRender
}) satisfies QuartzComponentConstructor<ConditionalRenderConfig>

 quartz/components/index.ts

@@ -21,6 +21,7 @@
import Breadcrumbs from "./Breadcrumbs"
import Comments from "./Comments"
import Flex from "./Flex"
import ConditionalRender from "./ConditionalRender"

export {
  ArticleTitle,
@@ -46,4 +47,5 @@
  Breadcrumbs,
  Comments,
  Flex,
  ConditionalRender,
}