env-overlay
TypeScript icon, indicating that this package has built-in type declarations

1.0.14 • Public • Published

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

Local Environment Development Environment Staging Environment Demo Environment

Calculated result for "other"

Other Environment

 

 

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
}

Package Sidebar

Install

npm i env-overlay

Weekly Downloads

5

Version

1.0.14

License

MIT

Unpacked Size

155 kB

Total Files

20

Last publish

Collaborators

  • monkeyworks