https://github.com/yungbricocoop/dev-banner
https://github.com/yungbricocoop/dev-banner
banner development react vite
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/yungbricocoop/dev-banner
- Owner: YungBricoCoop
- Created: 2024-06-30T19:44:44.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-01T10:29:56.000Z (almost 2 years ago)
- Last Synced: 2026-03-31T16:48:19.706Z (3 months ago)
- Topics: banner, development, react, vite
- Language: TypeScript
- Homepage:
- Size: 145 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ⚙️ 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:
```bash
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 :
```typescript
import React from "react";
import { DevBanner } from "dev-banner";
const IS_DEV = import.meta.env.MODE === "development";
function App() {
return (
My Application
);
}
```
> Check if we are in development mode by using the `hostname` :
```typescript
import React from "react";
import { DevBanner } from "dev-banner";
const IS_DEV = window.location.hostname !== "example.com";
function App() {
return (
My Application
);
}
export default App;
```
## ⚙️ Props
| Prop | Type | Default Value | Required | Description |
| ----------------------- | ------- | -------------- | -------- | ----------------------------------------------- |
| `isDev` | boolean | false | ✅ | Whether the application is in development mode. |
| `title` | string | ⚠️ DEV MODE ⚠️ | | Custom title for the banner. |
| `pagePrefix` | string | (DEV) | | Prefix for the page title. |
| `displayPagePrefix` | boolean | true | | Whether to display the page prefix. |
| `consoleMessage` | string | ⚠️ DEV MODE ⚠️ | | Custom message to log in the console. |
| `displayConsoleMessage` | boolean | true | | Whether to log the console message. |
| `className` | string | - | | Additional CSS classes for the banner. |
| `style` | object | - | | Custom styles for the banner. |
## 🌟 Example
> Code
```typescript
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(
);
}
```