html-dev-label

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

Installation and usage

Compatible with Node.js projects that support ECMAScript 2018 (ES9) or greater.

To use, install the package with npm...

npm install @codebundlesbyvik/html-dev-label

...and import and initialize htmlDevLabel.

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

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

Options

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 | "DEV BUILD" | 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 | "#FFF" (white) | Background color of the label. | | borderColor | String | "#F00" (red) | Border color of the label. |

Migrating

From version 2

• Breaking change: Support for position as String has been removed. Convert the 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.

License

MIT © 2024 Viktor Chin-Kon-Sung