Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »



    A React component to display an analysis or observation result in a coloured label according to result status.

    npm Version Build Status


    A minimal usage will just display the result using default background colours.

    let statusResult = "PASS";

    Other options can be passed in as params like so:

    let params = {
      	'bgColorMap' : {
            'pass' : '#3cb521',
            'ok' : '#3cb521',
            'fail' : '#cd0200',
            'alert' : '#d47500',
            'inc' : '#d47500',
            'flag' : '#474949',
            'label' : '#ffffff'
        'textColorMap' : {
            'pass' : '#ffffff',
            'ok' : '#ffffff',
            'fail' : '#ffffff',
            'alert' : '#ffffff',
            'inc' : '#ffffff',
            'flag' : '#ffffff',
            'label' : '#000000'
      	cssClass: ['class1', 'class2']
    <ResultStatusLabel params=params>PASS</ResultStatusLabel>;

    Params in more detail:


    • Optional parameter to specify colour of backgrounds for a given status type, and the text the status is displayed in.

    If the bgColorMap is not specified, the following default colours should be used:

    Value bgColorMap textColorMap
    pass #3cb521 #ffffff
    ok #3cb521 #ffffff
    fail #cd0200 #ffffff
    alert #d47500 #ffffff
    inc #d47500 #ffffff
    flag #474949 #ffffff
    label #ffffff #000000

    This colourMap can contains one or more flags. If a given status flag is provided, then it should override that status colour only. All others will remain as the default colour.


    • Optional parameter to add one or more css classes to the surrounding div.

    Business Rules:

    The statusResult (value given in this.props.children) is case insensitive, and can only be one of the following values:

    1. pass - Display as is, in uppercase
    2. fail - Display as is, in uppercase
    3. alert - Display as is, in uppercase
    4. flag - Display as is, in uppercase
    5. inc - Display with a period appended in uppercase, EG: INC.
    6. ok - Display with a non breaking space prepended and appended in uppercase, EG: &nbsp;OK&nbsp;
    7. Any other value, Display four question marks in uppercase, EG: ????


    • Display obeservation result in color label with color background.
    • Runs in the browser and Node.js.
    • Built on standards.


    import React,{Component} from 'react';
    import ReactDOM from 'react-dom';
    import ResultStatusLabel from './component/result_status_label'
    class App extends Component {
        render() {
            let params = {
              'bgColorMap' : {
                'pass' : '#fff521',
                'ok' : '#3cb521',
                'fail' : '#cd0200',
                'alert' : '#d47500',
                'inc' : '#3cb521',
                'flag' : '#474949',
                'label' : '#ffffff'
              'textColorMap' : {
                'pass' : '#ffffff',
                'ok' : '#ffffff',
                'fail' : '#ffffff',
                'alert' : '#ffffff',
                'inc' : '#cd0200',
                'flag' : '#ffffff',
                'label' : '#ffffff'
              'cssClass': ['bold', 'center']
                 <h2>Lable Status</h2>
                  <br />
                   <br />
                   <ResultStatusLabel params={params}>inc</ResultStatusLabel>
    ReactDOM.render(<App />,document.querySelector('.container'));

    This example would render: "OK" label with default background "#3cb521" and color "#ffffff". "FAIL" label with default background "#cd0200" and color "#ffffff". "INC." label with background "#3cb521" and color "#cd0200".

    Technology Stack:

    • react
    • mocha


    Clone the repo as a new project:

    git clone <result-status-label>

    Start Server:

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

    Run App:

    npm start command automatically initiate browser at 3000 port

    Run tests:

    cd result-status-label
    npm i
    npm test

    Developer Notes:

    Make sure you configure your editor/IDE to use:



    npm i react-npm-result-status-label

    Downloadsweekly downloads








    last publish


    • avatar