xray react ui development strategy component xray-first-design

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>
    )
  }
}