Recipes

Helpful guides and code snippets.

Schema

Additional fields

All Reflex schema types such as Page, Post or Video have a data (JSON) field you can use to store additional data via frontmatter.

Consider the following page example:

---
title: Page title
display: full
---
Page content

The display field is not defined in the Page schema. However, when Reflex builds the Page, all frontmatter fields, including display, are stored as is in the data field.

You can leverage this to pass in additional data from your .mdx file to your component.

Example:

export const Page = ({ title, data }) => (
  {data.display === "full"} do something... 
)

Theming

Styling components

Any component can be styled in theme.js using the component name (lowercased).

Example:

1. Use button for the Button component.
2. Use h1 for the H1 component.

import base from "@reflexjs/preset-base"
export default {
  preset: base,
  // Extend the styles for button.
  // This inherits all the styles from the base preset.
  button: {
    fontSize: "md",
    borderRadius: "3xl",
  },
}

We call this a variant. You can read more on Theme UI variants here.

Skipping breakpoints

Use null to skip some breakpoints when using responsive style props.

<Div pt="null|null|10" />

Styling active links

To style the active Link component use the activeStyle prop:

<Link
  to={slug}
  color="text"
  fontWeight="semi"
  activeStyle={{
    color: "primary",
  }}
>
  {title}
</Link>

Custom syntax highlighting

Syntax highlighting for the code block is provided by Prism. To customize the colors, add the following colors to your theme.js file.

export default {
  preset: base,
  colors: {
    // Other custom colors.
    text: "#000",
    background: "#fff",
    primary: "#2a9d8f",
    secondary: "#e76f51",
    // Customize the code block theme.
    prism: {
      text: "#d6deeb",
      background: "#212130",
      comment: "#93b4b4",
      string: "#addb67",
      var: "#d6deeb",
      number: "#f78c6c",
      constant: "#82aaff",
      punctuation: "#c792ea",
      className: "#ffcb8b",
      tag: "#7fdbca",
      boolean: "#ff5874",
      property: "#80cbc4",
      namespace: "#b2ccd6",
      highlight: "#243E73",
      file: "#92B5B2",
    },
  },
  fonts: {
    ...
    // Customize the font for the code block.
    monospace: "Menlo, monospace",
  },
}

Content

Slugs

Every page is associated with a slug (or route).

Example: If you create a page at content/pages/example.mdx, a slug will automatically be created for this page and will be accessible at /example.

You can manually specify the slug for a page by adding it to the page markdown.

---
title: Example
excerpt: This is an example page with a custom slug.
slug: a-custom-slug
---

The page above will be accessible at /a-custom-slug.

Hint: If you name your page index.mdx, it will use `` as the slug. Use this to create your front page.

• content/pages/index.mdx will have the / slug.
• content/pages/about/index.mdx will have the /about slug.