Easily see what environment you are viewing your application in via a small overlay.

Lightweight (3.3K - 1.3K gzipped), easy to use and easy to customize.

Comes with built-in visual, but can easily be customized via options.

Calculates visuals for other environment names than the built-in - if none are provided via options

Examples of defaults

Calculated result for "other"

Installation

$ npm install env-overlay --save

Usage

import { envOverlay } from ' env-overlay ' envOverlay ( process . env . NODE_ENV )

Signature

(environment: string, options?: IEnvOverlayOptions) => void

Click here to view IEnvOverlayOptions

Options

options.disallow - String or array of strings

Name(s) of environments to exclude usage of env-overlay. The module will bailout early if the the environment name given matches the string, or one of the strings, given.

Default: "production"

options.background - Object { key (env name): value (any valid CSS color) }

A map of background colors for given environment names. There are default colors for the environments "local", "development", "staging" and "demo".

Should an environment not have a matching background color key/value provided in options, then a color will be assigned based on the environment name.

All credit goes to Edd Turtle for this feature

options.text - Object { key (env name): value (any valid CSS color) }

A map of text colors for given environment names. There are default colors for the environments "local", "development", "staging" and "demo".

options.onLoaded - Function

Has the wrapper DOM node of the overlay as its argument for your DOM manipulatory pleasure.

IEnvOverlayOptions interface

The typescript interface for the options (IEnvOverlayOptions) looks like this