Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jxnblk/react-x-ray
React CSS Layout Debugger
https://github.com/jxnblk/react-x-ray
css debug layout react
Last synced: 4 days ago
JSON representation
React CSS Layout Debugger
- Host: GitHub
- URL: https://github.com/jxnblk/react-x-ray
- Owner: jxnblk
- License: mit
- Created: 2017-05-30T16:56:57.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-04-28T17:02:10.000Z (over 6 years ago)
- Last Synced: 2024-12-15T23:05:05.656Z (11 days ago)
- Topics: css, debug, layout, react
- Language: JavaScript
- Homepage: http://jxnblk.com/react-x-ray/
- Size: 3.35 MB
- Stars: 571
- Watchers: 10
- Forks: 24
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React X-Ray
React CSS Layout Debugger
```sh
npm i react-x-ray
```
Demo:
## Usage
```jsx
import React from 'react'
import XRay from 'react-x-ray'
const App = props => (
Look at me!
)
```
## 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](http://tachyons.io/xray/)
MIT License