@codebundlesbyvik/html-dev-label NPM

html-dev-label

An HTML element rendered on page indicating that your project is compiled with process.env.NODE_ENV set to development.

html-dev-label

It's easy to confuse the development environment of a website with production when you have many tabs & windows open. Well, not any more.

Install the package with npm.

npm install @codebundlesbyvik/html-dev-label

Import and initialize htmlDevLabel. I recommend you do this in your main JavaScript file.

import htmlDevLabel from "@codebundlesbyvik/html-dev-label";

htmlDevLabel(["top", "left"]);

htmlDevLabel accepts a single, optional parameter which is either:

An Array with 2 position values, or
An Object containing one or more of the option entries listed in the table below.

Key	Type	Default	Description
`parentEl`	`HTMLElement`	`document.body`	Element of which the label will become the first child.
`position`	`["top" \\| "bottom", "left" \\| "right"]`	`["bottom", "right"]`	Position of the label.
`size`	`"sm" \\| "md" \\| "lg"`	`"md"`	Size of the label.
`text`	`String`	`"Build: dev"`	Text shown inside the label.
`fontFamily`	`"monospace" \\| "sans-serif" \\| "inherit"`	`"monospace"`	Style of font family used for the label text. Will use the computed value of the parent element when set to `"inherit"`.
`backgroundColor`	`String`	`"#FFFFFF"` (white)	Background color of the label.
`borderColor`	`String`	`"#FF0000"` (red)	Border color of the label.

If you manually set position then you must convert its value to an Array.
The default font-family used for the label text has changed.
- If you prefer the old look, use value "sans-serif" for the fontFamily option.

6 months ago

6 months ago

2 years ago

2 years ago

2 years ago