Upgrade Guide

Step by step guide to upgrade your site to Reflexjs 2.0.

This guide is a work in progress. If you find any issues upgrading your site, create an issue on GitHub. We will help you.

Changelog

What's New

Reflexjs has been upgraded to work with React 17.0.0. This means we now have full support for the new JSX transform.
We also updated to Theme UI 0.6.0. This introduced some breaking changes (see below).
Variants are now callable.

theme.ts
const theme = {
  button: {
    primary: {
      bg: "primary",
    },
    outline: (theme, styles) => {
      color: styles?.bg // This returns "primary" with button.primary.outline.
    },
  },
}

<button variant="button.primary.outline" />

Breaking Changes

TypeScript: React components must now extend React.HTMLAttributes<T> for styles props.

- interface ButtonLinkProps {
+ interface ButtonLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
  children?: React.ReactNode
}

export function ButtonLink({ children, ...props }) {
  return (
    <a variant="button.link" {...props}>
      {children}
    </a>
  )
}

Global styles (styles.global) replaced with useRootStyles.

theme.ts
const theme = {
  useRootStyles: true, 
  styles: {
    // Applies to <html />.
    root: {
      m: 0,
      p: 0,

      "*": {
        boxSizing: "border-box",
      },
    },
  },
}

useRootStyles: true applies styles.root to html.

useRootStyles: false applies styles.root to body.

Deprecations

Components such as Grid, Flex, Flexbox and Container are now deprecated.
reflexjs/babel is deprecated and replaced by @babel/preset-react.

Upgrade

To upgrade your site to Reflexjs:

Update react, react-dom and reflexjs.

yarn add react react-dom reflexjs

Update .babelrc.

If you're using Next.js, your .babelrc file should look like this:

{
  "presets": [
    [
      "next/babel",
      {
        "preset-react": {
          "runtime": "automatic",
          "importSource": "reflexjs"
        }
      }
    ]
  ]
}

Edit your theme and move the styles under styles.global under styles.root and set useRootStyles: true. If you have styles under html, move it directly under root.

theme.ts
const theme = {
  useRootStyles: true, 
  styles: {
    // Applies to <html />.
    root: {
      m: 0,
      p: 0,

      "*": {
        boxSizing: "border-box",
      },

      body: {},
    },
  },
}

Getting Started Next.js