React X-Ray

React CSS Layout Debugger

npm i react-x-ray

Demo: http://jxnblk.com/react-x-ray

Usage

import React from 'react'
import XRay from 'react-x-ray'

const App = props => (
  <XRay>
    <div style={{ padding: 32 }}>
      <h1>Look at me!</h1>
    </div>
  </XRay>
)

Props

• grid (number or boolean) pixel dimensions of background grid
• outline (boolean) show element outlines
• center (boolean) center the background grid
• color (string) base color for grid and outlines
• backgroundColor (string) background color of XRay component

Inspired by Tachyons X-RAY

MIT License