https://github.com/clayrisser/xray-first-react

build react applications using the xray first design approach
https://github.com/clayrisser/xray-first-react

component development react strategy ui xray xray-first-design

Last synced: 5 days ago
JSON representation

build react applications using the xray first design approach

• Host: GitHub
• URL: https://github.com/clayrisser/xray-first-react
• Owner: clayrisser
• License: mit
• Created: 2018-11-19T22:51:01.000Z (about 6 years ago)
• Default Branch: main
• Last Pushed: 2023-07-10T06:14:15.000Z (over 1 year ago)
• Last Synced: 2025-02-06T13:19:23.921Z (7 days ago)
• Topics: component, development, react, strategy, ui, xray, xray-first-design
• Language: JavaScript
• Homepage: https://codejam.ninja
• Size: 966 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# xray-first-react

[![GitHub stars](https://img.shields.io/github/stars/codejamninja/xray-first-react.svg?style=social&label=Stars)](https://github.com/codejamninja/xray-first-react)

> build react applications using the xray first design approach

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

![](assets/xray-first-react.png)

## 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](https://codejamninja.github.io/xray-first-react/)

## Installation

```sh

npm install --save xray-first-react

```

## Dependencies

* [NodeJS](https://nodejs.org)

## Usage

```js

import React, { Component } from 'react';

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

const { env } = process;

export default class App extends Component {

  render() {

    return (

      

        

          


            Hello, world

          

        

      

    )

  }

}

```


## Support

Submit an [issue](https://github.com/codejamninja/xray-first-react/issues/new)

## Screenshots

[Contribute](https://github.com/codejamninja/xray-first-react/blob/master/CONTRIBUTING.md) a screenshot

## Contributing

Review the [guidelines for contributing](https://github.com/codejamninja/xray-first-react/blob/master/CONTRIBUTING.md)

## License

[MIT License](https://github.com/codejamninja/xray-first-react/blob/master/LICENSE)

[Jam Risser](https://codejam.ninja) © 2018

## Changelog

Review the [changelog](https://github.com/codejamninja/xray-first-react/blob/master/CHANGELOG.md)

## Credits

* [Jam Risser](https://codejam.ninja) - Author

## Support on Liberapay

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

[Add some fuel](https://liberapay.com/codejamninja/donate) if you'd like to keep me going!

[![Liberapay receiving](https://img.shields.io/liberapay/receives/codejamninja.svg?style=flat-square)](https://liberapay.com/codejamninja/donate)

[![Liberapay patrons](https://img.shields.io/liberapay/patrons/codejamninja.svg?style=flat-square)](https://liberapay.com/codejamninja/donate)