dev-banner v0.0.2

⚙️ DevBanner

A simple React component to display a development mode banner.

It uses the isDev prop to determine whether the application is in development mode. You can define the value of isDev based on your requirements. For example, you can make it depend on the vite environment mode or the hostname, or any other condition you can imagine. If isDev is true, it will display a banner at the top of the page to indicate that the application is in development mode.

✨ Features

• 🚀 Automatically prefixes the page title with a development mode indicator.
• 🎨 Customizable banner message and styles.
• 🌐 Only displays in non-production environments.

📦 Installation

Install the package using npm:

npm install dev-banner

🔧 Usage

Import and use the DevBanner component in your React application:

Check if we are in development mode by using vite env :

import React from "react";
import { DevBanner } from "dev-banner";

const IS_DEV = import.meta.env.MODE === "development";
function App() {
    return (
        <div>
            <DevBanner isDev={IS_DEV} />
            <h1>My Application</h1>
        </div>
    );
}

Check if we are in development mode by using the hostname :

import React from "react";
import { DevBanner } from "dev-banner";

const IS_DEV = window.location.hostname !== "example.com";

function App() {
    return (
        <div>
            <DevBanner isDev={IS_DEV} />
            <h1>My Application</h1>
        </div>
    );
}

export default App;

⚙️ Props

🌟 Example

Code

import { DevBanner } from "dev-banner";
const IS_DEV = import.meta.env.MODE === "development";

const rootElement = document.getElementById("root")!;
if (!rootElement.innerHTML) {
    const root = ReactDOM.createRoot(rootElement);
    root.render(
        <StrictMode>
            <DevBanner isDev={IS_DEV} title="🚧 Development Mode" />
            <RouterProvider router={router} />
        </StrictMode>
    );
}