react-console-notify | Made a small React package to show console logs in the UI

Wexop — Sat, 02 Aug 2025 12:46:32 +0000

Hi all !

I built a small React package that displays console.log, warn, error, etc., directly in the app as floating notifications, it should be helpful for debugging without having the dev tools always open :)

It's called react-console-notify. Still fresh so feedbacks are appreciated !

GitHub - Npm - Live demo

Im new into creating package, I just had this idea because I always find myself digging through the dev tools to find THE log i want ahah

So i'd be happy to hear your thoughts or feedback !

Installation

npm

npm install react-console-notify

pnpm

pnpm i react-console-notify

yarn

yarn add react-console-notify

Usage

To use react-console-notify in your React project, import the main component and the CSS file like this

Make sure to import the CSS file (index.css) so the notifications are styled correctly

import ConsoleNotifier from "react-console-notify"
import "react-console-notify/index.css"


function App() {
  return (
    <>
      <ConsoleNotifier enabled>
        {
          /* your app content */
        }
      </ConsoleNotifier>
    </>
  );

}

Props

Prop	Type	Default	Description
`types`	`LogType[]` (`"log"`, `"warn"`, etc.)	`["log", "warn", "error", "info", "debug"]`	Console methods to intercept and notify.
`onNotify`	`(type: LogType, ...args: unknown[]) => void`	`undefined`	Custom callback called on each intercepted log. Overrides default notification behavior.
`colorMap`	`Record<LogType, string>`	See below	Allows custom colors per log type.
`children`	`ReactNode`	`undefined`	Optional children to render within the same tree.
`enabled`	`boolean`	`true`	Enable notifications or not. This can be useful to disable on production environment.
`position`	`"top-right"` \	`"top-left"`	`"top-right"`
`duration`	`number \	null`	`5000` (ms)
`backgroundOpacity`	`number` (`0` → transparent, `1` → solid)	`0.5`	Background transparency of the notification.
`containerHeight`	`number \	string`	`500px`

Default colorMap

{
    log: "#6c757d",    // Gray
    warn: "#f4b400",   // Yellow
    error: "#f28b82",  // Red
    info: "#719dcb",   // Blue
    debug: "#61b96e",  // Green
}

Forem: Wexop

react-console-notify | Made a small React package to show console logs in the UI

Installation

Usage

Props

Default colorMap