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.
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" />