We are adding support for Nextjs. Get in touch on Twitter to learn more.

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 block Blocks library