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

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
}