xray-first-react

build react applications using the xray first design approach

Please ★ this repo if you found it useful ★ ★ ★

Features

• Automatically generates colors to differentiate sections
• Option to hide content to help zero in on styling
• Options to show labels of sections

Demo

View live demo at codejamninja.github.io/xray-first-react

Installation

npm install --save xray-first-react

Dependencies

• NodeJS

Usage

import React, { Component } from 'react';
import { XrayProvider, Xray } from 'xray-first-react';

const { env } = process;

export default class App extends Component {
  render() {
    return (
      <XrayProvider enabled={env.NODE_ENV === 'true'}>
        <Xray label="content">
          <div>
            Hello, world
          </div>
        </Xray>
      </XrayProvider>
    )
  }
}

Support

Submit an issue

Screenshots

Contribute a screenshot

Contributing

Review the guidelines for contributing

License

MIT License

Jam Risser © 2018

Changelog

Review the changelog

Credits

• Jam Risser - Author

Support on Liberapay

A ridiculous amount of coffee ☕ ☕ ☕ was consumed in the process of building this project.

Add some fuel if you'd like to keep me going!