React Color Visualiser

React Color Visualiser is a development tool that helps temporarily manipulate the CSS in your application to test out different color palletes and styles

Prerequisites

This project requires NodeJS (version 8 or later) and NPM. Node and NPM are really easy to install. To make sure you have them available on your machine, try running the following command.

$ npm -v && node -v
6.4.1
v8.16.0

Table of contents

• React Color Visualiser

  • Prerequisites
  • Table of contents
  • Getting Started
  • Installation
  • Usage
  • Built With
  • License

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Installation

BEFORE YOU INSTALL: please read the prerequisites

To install and set up the library, run:

$ npm install -d react-color-visualiser

Or if you prefer using Yarn:

$ yarn add --dev react-color-visualiser

Usage

Wrap your application

import ReactColorVisualiser from 'react-color-visualiser';
import 'react-color-visualiser/lib/main.css'

...

return (
    <ReactColorVisualiser>
        <App/>
    </ReactColorVisualiser>
)

Click anywhere in your application and the selected node will show in the control panel

You can import color palettes for websites like Coolors for testing different themes

Built With

• React.js
• Rollup
• SASS

License

MIT License © Mazen Alswar