The Trans Directory
feat: conditional render component
+50
-2
+22
docs/layout-components.md
+22
docs/layout-components.md
···
60
60
```typescript
61
61
Component.DesktopOnly(Component.TableOfContents())
62
62
```
63
+
64
+
## `ConditionalRender` Component
65
+
66
+
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.
67
+
68
+
```typescript
69
+
type ConditionalRenderConfig = {
70
+
component: QuartzComponent
71
+
condition: (props: QuartzComponentProps) => boolean
72
+
}
73
+
```
74
+
75
+
### Example Usage
76
+
77
+
```typescript
78
+
Component.ConditionalRender({
79
+
component: Component.Search(),
80
+
condition: (props) => props.displayClass !== "fullpage",
81
+
})
82
+
```
83
+
84
+
This example would only render the Search component when the page is not in fullpage mode.
+4
-1
quartz.layout.ts
+4
-1
quartz.layout.ts
···
17
17
// components for pages that display a single page (e.g. a single note)
18
18
export const defaultContentPageLayout: PageLayout = {
19
19
beforeBody: [
20
-
Component.Breadcrumbs(),
20
+
Component.ConditionalRender({
21
+
component: Component.Breadcrumbs(),
22
+
condition: (page) => page.fileData.slug !== "index",
23
+
}),
21
24
Component.ArticleTitle(),
22
25
Component.ContentMeta(),
23
26
Component.TagList(),
-1
quartz/build.ts
-1
quartz/build.ts
+22
quartz/components/ConditionalRender.tsx
+22
quartz/components/ConditionalRender.tsx
···
1
+
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
2
+
3
+
type ConditionalRenderConfig = {
4
+
component: QuartzComponent
5
+
condition: (props: QuartzComponentProps) => boolean
6
+
}
7
+
8
+
export default ((config: ConditionalRenderConfig) => {
9
+
const ConditionalRender: QuartzComponent = (props: QuartzComponentProps) => {
10
+
if (config.condition(props)) {
11
+
return <config.component {...props} />
12
+
}
13
+
14
+
return null
15
+
}
16
+
17
+
ConditionalRender.afterDOMLoaded = config.component.afterDOMLoaded
18
+
ConditionalRender.beforeDOMLoaded = config.component.beforeDOMLoaded
19
+
ConditionalRender.css = config.component.css
20
+
21
+
return ConditionalRender
22
+
}) satisfies QuartzComponentConstructor<ConditionalRenderConfig>
+2
quartz/components/index.ts
+2
quartz/components/index.ts
···
21
21
import Breadcrumbs from "./Breadcrumbs"
22
22
import Comments from "./Comments"
23
23
import Flex from "./Flex"
24
+
import ConditionalRender from "./ConditionalRender"
24
25
25
26
export {
26
27
ArticleTitle,
···
46
47
Breadcrumbs,
47
48
Comments,
48
49
Flex,
50
+
ConditionalRender,
49
51
}