Reflexjs
DocumentationBlocks LibraryGuidesGitHub
v1.0.1

Getting started

Welcome to the Reflexjs documentation.

Reflexjs is a styling library built for speed and excellent developer experience.

It allows you to style your components using style props and constraints based on the System UI specifications.

If you are already using Emotion or Theme UI, Reflexjs has a zero-runtime build size. It is a developer tool and never makes it into your production build.

Installation#

Reflexjs works with any React framework. Select your framework below to get started.

Next.js

Gatsby

React

Are you upgrading an existing Reflexjs + Gatsby site? We are working on a migration path that should be available soon.

Nextjs#

Using a starter#

The easiest way to get started is to use the nextjs-starter template. This sets up everything automatically for you.

npx create-next-app -e https://github.com/reflexjs/nextjs-starter

Once your site is ready, you can run yarn dev to start the development environment.

Add to existing site#

You can also add Reflexjs to an existing Nextjs site.

Install dependencies#

Add reflexjs to your site.

npm i reflexjs

Create a theme#

Generate a theme using the Reflexjs CLI utility.

npx reflexjs --preset base

This will create a theme.js file using the base preset at the root of your project.

Update _app.js#

Create src/pages/_app.js with the following code:

src/pages/_app.js
import { ThemeProvider } from "reflexjs" 
import theme from "../src/theme" 
export default function App({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

Update _document.js#

Add InitializeColorMode to src/pages/_document.js

src/pages/_document.js
import Document, { Html, Main, NextScript, Head } from "next/document"
import { InitializeColorMode } from "reflexjs" 
export default class extends Document {
  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          <InitializeColorMode /> 
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

Add the Babel preset#

Reflexjs includes the reflexjs/babel preset. This preset automatically sets the jsx pragma for you so that you don't need to import it in individual files.

Create a .babelrc file at the root of your project with the following:

{
  "presets": ["next/babel", "reflexjs/babel"]
}

You are now ready to start the development server using yarn dev.

Gatsby#

Using a starter#

Use the gatsby-starter template to create your next Gatsby + Reflexjs site.

gatsby new site reflexjs/gatsby-starter

Once your site is ready, you can run yarn dev to start the development environment.

Add to existing site#

You can also add Reflexjs to an existing Gatsby site.

Install dependencies#

npm i reflexjs gatsby-plugin-reflexjs babel-preset-gatsby

Create a theme#

Generate a theme using the Reflexjs CLI utility.

npx reflexjs

This will create a minimal theme.js file at the root of your project.

Enable the plugin#

Enable the gatsby-plugin-reflexjs in your gatsby-config.js file.

gatsby-config.js
const theme = require("./theme") 
module.exports = {
  plugins: [
    // ....
    {
      resolve: `gatsby-plugin-reflexjs`,
      options: {
        theme,
      },
    },
    // ...
  ],
}

Add the Babel preset#

Reflexjs includes the reflexjs/babel preset. This preset automatically sets the jsx pragma for you.

Create a .babelrc file at the root of your project with the following:

{
  "presets": ["babel-preset-gatsby", "reflexjs/babel"]
}

React#

Using Create React App#

Add Reflexjs to create-react-app.

npx create-react-app my-app

Install dependencies#

npm i reflexjs

Create a theme#

Generate a theme using the Reflexjs CLI utility.

npx reflexjs --preset base

This will create a minimal theme.js file at the root of your project.

Move theme.js inside the src directory.

Update index.js#

src/index.js
import React from "react"
import ReactDOM from "react-dom"
import "./index.css"
import App from "./App"
import reportWebVitals from "./reportWebVitals"
import theme from "./theme"
import { ThemeProvider } from "reflexjs" 
ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById("root")
)
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals()

Update .env.#

Turn off the new JSX transform. We are still working on adding support for the new JSX transform.

.env
DISABLE_NEW_JSX_TRANSFORM=true

You are now ready to start using Reflexjs to style your pages.

src/App.js
/** @jsx jsx */ 
import { jsx } from "reflexjs" 
function App() {
  return (
    <div p="10" textAlign="center">
      <p color="primary">
        Edit <code>src/App.js</code> and save to reload.
      </p>
    </div>
  )
}
export default App
Theme Specification

© 2021 Reflexjs

DocumentationBlocks LibraryGuidesGitHub