Environment Banner

Framework-agnostic JS/TS library to display a colored environment banner in a corner of the page.

Goal: reduce human mistakes by clearly marking LOCAL, STAGING, PRODUCTION, or custom environments.

• No runtime dependencies
• Works with vanilla JS, React, Vue, Angular, Svelte, Astro, etc.
• Can be installed from npm or used from a direct ESM link

Installation

npm install environment-banner

Quick Start (NPM)

import { createEnvironmentBanner } from 'environment-banner'

createEnvironmentBanner()

Auto-detection uses window.location.hostname:

• localhost, 127.0.0.1, *.local => LOCAL
• hostnames containing staging, stage, qa, test, uat, preprod, preview => STAGING
• everything else => PRODUCTION

Configuration

import { createEnvironmentBanner } from 'environment-banner'

createEnvironmentBanner({
	environment: 'staging',
	label: 'PREVIEW',
	position: 'bottom-left',
	disableOnLocal: true,
	offsetX: 16,
	offsetY: 16,
	opacity: 0.95,
})

API

• createEnvironmentBanner(options)
• updateEnvironmentBanner(options)
• destroyEnvironmentBanner()

Options

• environment?: string
• label?: string
• position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
• widthPx?: number
• heightPx?: number
• zIndex?: number
• offsetX?: number
• offsetY?: number
• opacity?: number
• borderRadius?: number
• fontSizePx?: number
• fontFamily?: string
• letterSpacingPx?: number
• disableOnLocal?: boolean

Browser Link (No Build Tools)

After publishing, it can be used directly from a CDN as ESM:

<script type="module">
	import { createEnvironmentBanner } from 'https://esm.sh/environment-banner'

	createEnvironmentBanner()
</script>

Development

npm install
npm run build
npm test

License

MIT