Env Label

During development, have you operated on your production page that was open at the same time by mistake?

Env Label will save you from such a mistake.

Usage

Just install and call init method to set up in your code.

Step1. Installation

$ npm install --save env-label
or
$ yarn add env-label

Step2. Initialize

Use as ES module

import EnvLabel from 'env-label';

EnvLabel.init({
  conditions: [
    {regex: /localhost/,    labelText: 'development', labelColor: '#00aaaa'},
    {regex: /example\.com/, labelText: 'production!!!', labelColor: '#aa0000'},
  ]
});

Load through <script> tag

<script type="text/javascript" src="path/to/dist/js/env-label.js"></script>
<script type="text/javascript">
    // initialize with conditions
    window.EnvLabel.init({
      conditions: [
        {regex: /localhost/,    labelText: 'development', labelColor: '#00aaaa'},
        {regex: /example\.com/, labelText: 'production!!!', labelColor: '#aa0000'},
      ]
    });
</script>

That's all!

(Optional) Skip set up in some environment

If you don't want to run env-label on production, just skip the initialization on build or runtime.

if (!process.env.DISABLE_ENV_LABEL) {
  EnvLabel.init({ ... });
}

// or

if (anyCondition) {
  EnvLabel.init({ ... });
}

Configuration Options

EnvLabel.init({ conditions: Array<Condition> }): void

It initializes EnvLabel based on conditions parameter. The conditions should be like below.

Condition

Parameter | Required | Type | Description --- | --- | --- | --- regex | true | RegExp | A regex to test against window.location.hostname. If it matches, a label appears. labelText | false | string | Text that you want to show on a label. labelColor | false | string | Color of label.