react-npm-result-movement-label

react-npm-result-movement-label

A React component to display result with movement.

Overview

A react component to display label that includes a up or down direction indicator.

let params = {
  'colorMap' : {
    'up' : '#fff521',
    'down' : '#cd0200',
    'zero' : '#d47500',
    'label' : '#ffffff'
  },
  'cssClass': ['bold', 'center']
};
<ResultMovementLabel direction={'up'} params={params}>3%</ResultMovementLabel>

This would be a green (default for up unless overridden by params) label and on the left of the 3% would be an up arrow (http://fortawesome.github.io/Font-Awesome/icon/arrow-circle-up/)

<ResultMovementLabel direction={'down'} params={params}>$2.53</ResultMovementLabel>

This would be a red label (default for down unless overridden by params) label and on the left of the $2.53 would be a down arrow (http://fortawesome.github.io/Font-Awesome/icon/arrow-circle-down/)

<ResultMovementLabel direction={'zero'} params={params}>0%</ResultMovementLabel>

This would be an orange (default for zero unless overridden by params) label and on the left of the 0% would be a dash (http://fortawesome.github.io/Font-Awesome/icon/minus-circle/)

Features

• Display result with up direction with success color.
• Display result with down direction with danger color .
• Display result with zero direct with info color.
• Display result with any direction with color passed through params.
• Runs in the browser and Node.js.
• Built on standards.

Example

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import ResultMovementLabel from 'react-npm-result-movement-label';

class App extends Component {
  render() {
    let params = {
      'colorMap' : {
        'up' : '#fff521',
        'down' : '#cd0200',
        'zero' : '#d47500',
        'label' : '#ffffff'
      },
      'cssClass': ['bold', 'center']
    };
    return(
      <div>
      <h2>Result Movement Label</h2>
      <ResultMovementLabel direction={'up'}>3%</ResultMovementLabel>
      <br />
      <ResultMovementLabel direction={'up'} params={params}>$2.53</ResultMovementLabel>
      <br />
      <ResultMovementLabel direction={'down'}>3%</ResultMovementLabel>
      <br />
      <ResultMovementLabel direction={'down'} params={params}>$2.53</ResultMovementLabel>
      <br />
      <ResultMovementLabel direction={'zero'}>3%</ResultMovementLabel>
      <br />
      <ResultMovementLabel direction={'zero'} params={params}>3%</ResultMovementLabel>
      <br />
      </div>
    );
  }
}

ReactDOM.render(<App />,document.querySelector('.container'));

Technology Stack:

• react
• mocha

Usage:

Clone the repo as a new project:

git clone https://github.com/lobdev/react-npm-result-movement-label <result-movement-label>

Start Server:

First you have to replace the lib/component/result_movement_label.js to server.js in package.json
cd result-movement-label
npm i
npm start

Run App:

npm start command automatically initiate browser at 3000 port
http:://localhost:3000

Run tests:

cd result-movement-label
npm i
npm test

Developer Notes:

Make sure you configure your editor/IDE to use:

.editorconfig
.eslintrc