env-overlay

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'
 
// Here assuming the environment variable NODE_ENV is set for sure
// And that it is accessible via process.env
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

export interface IEnvOverlayOptions {
  corner?: 'left' | 'right'
  disallow?: string | string[]
  background?: { [key: string]: string }
  text?: { [key: string]: string }
  onLoaded?: (node: HTMLDivElement) => void
}