env-label

Show colored labels to help distinguish on which environment your app runs

Usage no npm install needed!

<script type="module">
  import envLabel from 'https://cdn.skypack.dev/env-label';
</script>

README

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.

env

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.

label