Reflex
  • Blocks
    • Header
    • Hero
    • Features
    • Call to action
    • Forms
    • Pricing
    • Team
    • Testimonials
    • Cards
    • Footer
    • Posts
    • Videos
  • Examples
  • Learn
  • Videos
  • Docs
  • Theme

    Theme reference

    • Colors
    • Font family
    • Font size
    • Font weight
    • Line height
    • Box shadow
    Create a theme Extend base
arshadcnv0.5.3
Reflex
Reflex

Dynamic Blocks

Blocks can accept props just like React components.

The hero we created has some hard-coded values. This is not re-usable. Let's change that by using props.

We are going to wrap the hero.mdx block in a named export. The name can be anything you want.

content/blocks/hero.mdx
export const HeroBlock = () => (
<Section p="4">
<Container>
<Grid col="1fr 250px" gap="8" alignItems="center">
<Div>
<H1 my="0" fontSize="4xl">
Welcome to my site
</H1>
<P mt="4">This is the a short description for the page</P>
</Div>
<Image src="placeholder.jpg" />
</Grid>
</Container>
</Section>
)

Then replace the hard-coded values by props.

content/blocks/hero.mdx
export const HeroBlock = ({ heading, text }) => (
<Section p="4">
<Container>
<Grid col="1fr 250px" gap="8" alignItems="center">
<Div>
<H1 my="0" fontSize="4xl">
{heading}
</H1>
<P mt="4">{text}</P>
</Div>
<Image src="placeholder.jpg" />
</Grid>
</Container>
</Section>
)

Update the block on the about.mdx page to use props.

content/pages/about.mdx
---
title: Welcome to Reflex
excerpt: Description for this page. This is mostly used for the description meta tag.
---
<Block src="hero" heading="Welcome to my site" text="This is the a short description for the page" />

Now that the hero.mdx block can accept props, we can re-use it on other pages.

content/pages/pricing.mdx
---
title: Pricing
---
<Block src="hero" heading="Pricing" text="This is the a short description for the pricing page" />
Add a blockBlocks library

© 2020 Reflex

  • Blocks
  • Examples
  • Learn
  • Docs
  • Github