☁️ Reflex ·

Reflex is a configurable grid and layout engine for React. With Reflex, you can eliminate your layout css or reduce it to just a few lines.

Learn how to use Reflex in your own project.

Play with a demo

📺 Examples

We have several examples on the website. Here is one of them:

import * as React from 'react'
import { Grid } from 'xn-reflex'
 
<Grid>
  <Grid size={5} margin={2}>Content Here</Grid>
  <Grid size={7}>More Content</Grid>
</Grid>

This will create 2 columns of sizes 5, 7 (defaults to a 12-column grid).

There are additional components to assist with layout, for a deeper dive into reflex, check out the wiki, the examples here or follow the Getting Started guide.

🖥 Install

Reflex is available as the xn-reflex package on npm. It is also available on the unpkg CDN.

You can install it with:

yarn add xn-reflex

React and PropTypes are peer dependencies of the generated bundle.

⚙️ Dev Mode

Ensuring a layout adheres to the grid can be difficult. To simplify this task, Reflex includes an overlay Component to assist you. During development, import and append <Dev/> to your pages. It doesn't render anything by default but pressing CTRL+SHIFT+K will toggle it.

Learn more about <Dev /> mode in the wiki.

import * as React from 'react'
import { Dev } from 'xn-reflex'
 
export default function MyPage() {
  return (<>
    <Dev />
    {/* other components */}
  </>)
}

👥 Contributors

The main purpose of this repository is to continue to evolve Reflex, making it more capable and easier to use. Development of Reflex happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements. Check the contributing.md to learn how you can take part in improving Reflex.

Thanks goes to these wonderful people (emoji key):