reflexjs-devdeprecated

A tiny library for creating and styling UI components with Theme UI.

Usage no npm install needed!

<script type="module">
  import reflexjsDev from 'https://cdn.skypack.dev/reflexjs-dev';
</script>

README

Reflex

A tiny library for creating and styling UI components with Theme UI. It combines the flexibility of Theme UI with the comfort of style props.

License PRs welcome! Follow @arshadcn

Documentation

Installation

Create React App

Step 1: Install dependencies

npm i theme-ui reflexjs-dev @reflexjs/preset-base

Step 2: Wrap your <App /> in a ThemeProvider.

// src/index.js
import React from "react"
import ReactDOM from "react-dom"
import { ThemeProvider } from "theme-ui"
import theme from "@reflexjs/preset-base"
import App from "./App"

const rootElement = document.getElementById("root")
ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>,
  rootElement
)

Next

Step 1: Install dependencies

npm i theme-ui reflexjs-dev @reflexjs/preset-base

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

// src/pages/_app.js
import * as React from "react"
import NextApp from "next/app"
import { ThemeProvider } from "theme-ui"
import theme from "@reflexjs/preset-base"

export default class App extends NextApp {
  render() {
    const { Component, pageProps } = this.props
    return (
      <ThemeProvider theme={theme}>
        <Component {...pageProps} />
      </ThemeProvider>
    )
  }
}

Step 3: Add InitializeColorMode to src/pages/_document.js

// src/pages/_document.js
import Document, { Main, NextScript } from "next/document"
import { InitializeColorMode } from "theme-ui"

export default class extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <html lang="en">
        <body>
          <InitializeColorMode />
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

Gatsby

Step 1: Install dependencies

npm i theme-ui reflexjs-dev @reflexjs/preset-base gatsby-plugin-theme-ui

Step 2: Enable gatsby-plugin-theme-ui in gatsby-config.js

// gatsby-config.js
module.exports = {
  plugins: [`gatsby-plugin-theme-ui`],
}

Step 3: Create src/gatsby-plugin-theme-ui/index.js with the following code.

// src/gatsby-plugin-theme-ui/index.js
import theme from "@reflexjs/preset-base"
export default {
  ...theme,
}

RedwoodJS

Step 1: Install dependencies

yarn workspace web add theme-ui reflexjs-dev @reflexjs/preset-base

Step 2: Add ThemeProvider to web/src/index.js

// web/src/index.js

import ReactDOM from "react-dom"
import { RedwoodProvider, FatalErrorBoundary } from "@redwoodjs/web"
import FatalErrorPage from "src/pages/FatalErrorPage"

// import './index.css'
import { ThemeProvider } from "theme-ui"
import theme from "@reflexjs/preset-base"

import Routes from "src/Routes"

ReactDOM.render(
  <FatalErrorBoundary page={FatalErrorPage}>
    <RedwoodProvider>
      <ThemeProvider theme={theme}>
        <Routes />
      </ThemeProvider>
    </RedwoodProvider>
  </FatalErrorBoundary>,
  document.getElementById("redwood-app")
)

Usage

import {
  Section,
  Container,
  Grid,
  Flexbox,
  H1,
  P,
  Button,
  Img,
} from "reflexjs-dev"

export default () => (
  <Section py="8|12|16|24">
    <Container>
      <Grid col="1|2" gap="8|12|16" alignItems="center">
        <Flexbox flexDirection="column" alignItems="center|flex-start">
          <H1 m="0" fontWeight="black" lineHeight="tight">
            Experiences that sell.
          </H1>
          <P fontSize="xl|2xl" mt="2">
            We connect you to the exclusive works from top artists around the
            world.
          </P>
          <Button as="a" href="#" variant="primary">
            Try it for free
          </Button>
        </Flexbox>
        <Img src="/placeholder.jpg" w="full" rounded="lg" />
      </Grid>
    </Container>
  </Section>
)

Responsive styles

Use a pipe | to separate responsive values. Example: The following <Div /> will have a margin-top of 2 in mobile, 4 for tablet and 6 for larger devices.

<Div mt="2|4|6" />

Array-like syntax is also supported.

<Div mt={[2, 4, 5]} />

Learn more about responsive styles in the Theme UI docs.

Pseudo-classes

For pseudo-classes such as hover, focus and active, prefix the style prop with the class name.

<Button bg="primary" hoverBg="accent" focusColor="secondary">
  Button
</Button>

Variants

If you find yourself repeating a lot of style props and would prefer abstracting this, you can do so using variant.

// theme.js
export default {
  button: {
    primary: {
      // Place styles for primary button here.
      bg: "primary"
      color: "white",
    },

    lg: {
      px: 4,
      py: 3
    },

    sm: {
      px: 2,
      py: 1,
    }
  }
}

You can then use variant with your Button.

<Button variant="primary lg" />

Icons

You can add custom icons to your theme and display them using the Icon component.

// theme.js
export default {
  ...theme,

  icons: {
    // Place all icons here.
    check:
      '<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><path d="M20 6L9 17l-5-5"/></svg>',
  },
}

Then using Icon.

import { Icon } from "reflexjs-dev"

export default () => <Icon name="check" color="primary" size="4" />