{"id":31547129,"url":"https://github.com/yungbricocoop/dev-banner","last_synced_at":"2026-04-29T16:02:30.930Z","repository":{"id":251287327,"uuid":"822279973","full_name":"YungBricoCoop/dev-banner","owner":"YungBricoCoop","description":null,"archived":false,"fork":false,"pushed_at":"2024-07-01T10:29:56.000Z","size":148,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-31T16:48:19.706Z","etag":null,"topics":["banner","development","react","vite"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/YungBricoCoop.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-30T19:44:44.000Z","updated_at":"2024-07-03T06:20:31.000Z","dependencies_parsed_at":"2024-08-02T01:11:32.253Z","dependency_job_id":null,"html_url":"https://github.com/YungBricoCoop/dev-banner","commit_stats":null,"previous_names":["yungbricocoop/dev-banner"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/YungBricoCoop/dev-banner","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YungBricoCoop%2Fdev-banner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YungBricoCoop%2Fdev-banner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YungBricoCoop%2Fdev-banner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YungBricoCoop%2Fdev-banner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/YungBricoCoop","download_url":"https://codeload.github.com/YungBricoCoop/dev-banner/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YungBricoCoop%2Fdev-banner/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32432917,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T13:34:34.882Z","status":"ssl_error","status_checked_at":"2026-04-29T13:34:29.830Z","response_time":110,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["banner","development","react","vite"],"created_at":"2025-10-04T15:56:59.924Z","updated_at":"2026-04-29T16:02:30.924Z","avatar_url":"https://github.com/YungBricoCoop.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ⚙️ DevBanner\n\n**A simple React component to display a development mode banner.**\n\nIt 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.\n\n## ✨ Features\n\n-   🚀 Automatically prefixes the page title with a development mode indicator.\n-   🎨 Customizable banner message and styles.\n-   🌐 Only displays in non-production environments.\n\n## 📦 Installation\n\nInstall the package using npm:\n\n```bash\nnpm install dev-banner\n```\n\n## 🔧 Usage\n\nImport and use the `DevBanner` component in your React application:\n\n\u003e Check if we are in development mode by using `vite` env :\n\n```typescript\nimport React from \"react\";\nimport { DevBanner } from \"dev-banner\";\n\nconst IS_DEV = import.meta.env.MODE === \"development\";\nfunction App() {\n    return (\n        \u003cdiv\u003e\n            \u003cDevBanner isDev={IS_DEV} /\u003e\n            \u003ch1\u003eMy Application\u003c/h1\u003e\n        \u003c/div\u003e\n    );\n}\n```\n\n\u003e Check if we are in development mode by using the `hostname` :\n\n```typescript\nimport React from \"react\";\nimport { DevBanner } from \"dev-banner\";\n\nconst IS_DEV = window.location.hostname !== \"example.com\";\n\nfunction App() {\n    return (\n        \u003cdiv\u003e\n            \u003cDevBanner isDev={IS_DEV} /\u003e\n            \u003ch1\u003eMy Application\u003c/h1\u003e\n        \u003c/div\u003e\n    );\n}\n\nexport default App;\n```\n\n## ⚙️ Props\n\n| Prop                    | Type    | Default Value  | Required | Description                                     |\n| ----------------------- | ------- | -------------- | -------- | ----------------------------------------------- |\n| `isDev`                 | boolean | false          | ✅       | Whether the application is in development mode. |\n| `title`                 | string  | ⚠️ DEV MODE ⚠️ |          | Custom title for the banner.                    |\n| `pagePrefix`            | string  | (DEV)          |          | Prefix for the page title.                      |\n| `displayPagePrefix`     | boolean | true           |          | Whether to display the page prefix.             |\n| `consoleMessage`        | string  | ⚠️ DEV MODE ⚠️ |          | Custom message to log in the console.           |\n| `displayConsoleMessage` | boolean | true           |          | Whether to log the console message.             |\n| `className`             | string  | -              |          | Additional CSS classes for the banner.          |\n| `style`                 | object  | -              |          | Custom styles for the banner.                   |\n\n## 🌟 Example\n\n\u003cimg src=\"./example.png\" alt=\"Example\" width=\"100%\"\u003e\n\n\u003e Code\n\n```typescript\nimport { DevBanner } from \"dev-banner\";\nconst IS_DEV = import.meta.env.MODE === \"development\";\n\nconst rootElement = document.getElementById(\"root\")!;\nif (!rootElement.innerHTML) {\n    const root = ReactDOM.createRoot(rootElement);\n    root.render(\n        \u003cStrictMode\u003e\n            \u003cDevBanner isDev={IS_DEV} title=\"🚧 Development Mode\" /\u003e\n            \u003cRouterProvider router={router} /\u003e\n        \u003c/StrictMode\u003e\n    );\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyungbricocoop%2Fdev-banner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyungbricocoop%2Fdev-banner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyungbricocoop%2Fdev-banner/lists"}