Add customization of styles

Author: dolfbarr

src/index.stories.tsx

@@ -21,13 +21,16 @@ export function App(): React.ReactElement {
 }
 
 export function ExampleComponent(): React.ReactElement {
-  const { log } = useLog()
+  const { log } = useLog({ styles: { componentCSS: 'color: darkBlue;' } })
   const [state, setState] = useState<string | null>(null)
+  const [anotherState, setAnotherState] = useState<string | null>(null)
 
   log(state)
+  log(anotherState, { styles: { componentCSS: 'color: darkRed;' } })
 
   useEffect(function setStateMount() {
     setState('onMount')
+    setAnotherState('onMount')
 
     setTimeout(function setStateChange1() {
       setState('onChange 1s')

src/index.test.tsx

@@ -4,8 +4,8 @@ import { useEffect, useState } from 'react'
 
 describe('useLog', () => {
   const OLD_ENV = process.env
-  const consoleLog = jest.spyOn(console, 'log').mockImplementation(() => {})
-  const consoleGroup = jest.spyOn(console, 'group').mockImplementation(() => {})
+  const consoleLog = jest.spyOn(console, 'log')
+  const consoleGroup = jest.spyOn(console, 'group')
 
   beforeEach(() => {
     jest.useFakeTimers()
@@ -176,4 +176,22 @@ describe('useLog', () => {
     renderHook(() => result.current.log('Test'))
     expect(consoleLog).not.toBeCalled()
   })
+
+  it('renders hook with custom styles', () => {
+    renderHook(() => {
+      const { log } = useLog({ styles: { componentCSS: 'color: darkBlue;' } })
+      log('Test')
+    })
+
+    expect(consoleGroup.mock.calls[0][1]).toBe('color: darkBlue;')
+  })
+
+  it('renders log with custom styles', () => {
+    renderHook(() => {
+      const { log } = useLog({ styles: { componentCSS: 'color: darkBlue;' } })
+      log('Test', { styles: { componentCSS: 'color: darkRed;' } })
+    })
+
+    expect(consoleGroup.mock.calls[1][1]).toBe('color: darkRed;')
+  })
 })

src/index.tsx

@@ -6,8 +6,18 @@ const CSS_SUB_VALUE = 'color: SlateGray; font-weight: thin;'
 
 const ALLOWED_NODE_ENVS = ['dev', 'development']
 
+export interface UseLog {
+  styles?: {
+    componentCSS?: string
+    changeCSS?: string
+    subValueCSS?: string
+  }
+}
+
+export type Log = UseLog
+
 export interface UseLogReturn {
-  log: <T>(value: T) => void
+  log: <T>(value: T, props?: Log) => void
 }
 
 interface PrintProps<T> {
@@ -24,7 +34,13 @@ export enum PrintTypes {
   Change = 'Change',
 }
 
-export function useLog(): UseLogReturn {
+export function useLog({
+  styles: {
+    componentCSS = CSS_COMPONENT,
+    changeCSS = CSS_CHANGE,
+    subValueCSS = CSS_SUB_VALUE,
+  } = {},
+}: UseLog = {}): UseLogReturn {
   const componentName =
     (function getComponentName() {
       try {
@@ -48,31 +64,38 @@ export function useLog(): UseLogReturn {
     }%c@ ${new Date().toLocaleTimeString()}`
   }
 
-  function print<T>({
-    value,
-    label,
-    prevValue,
-    type = PrintTypes.Change,
-    group = getGroupLabel(type),
-  }: PrintProps<T>): void {
-    console.group(group, CSS_COMPONENT, CSS_SUB_VALUE)
-
-    if (!('prevValue' in arguments[0])) {
-      console.log(`${label.padStart(14, ' ')}: ${String(value)}`)
-    } else {
-      console.log(
-        `Previous value: %c${String(arguments[0].prevValue)}`,
-        CSS_SUB_VALUE,
+  function log<T>(value: T, props?: Log): void {
+    const clonedValue = JSON.parse(JSON.stringify(value))
+    const prevValueRef = useRef<T>()
+
+    function print<T>({
+      value,
+      label,
+      prevValue,
+      type = PrintTypes.Change,
+      group = getGroupLabel(type),
+    }: PrintProps<T>): void {
+      console.group(
+        group,
+        props?.styles?.componentCSS ?? componentCSS,
+        props?.styles?.subValueCSS ?? subValueCSS,
       )
-      console.log(` Current value: %c${String(value)}`, CSS_CHANGE)
-    }
 
-    console.groupEnd()
-  }
+      if (!('prevValue' in arguments[0])) {
+        console.log(`${label.padStart(14, ' ')}: ${String(value)}`)
+      } else {
+        console.log(
+          `Previous value: %c${String(arguments[0].prevValue)}`,
+          props?.styles?.subValueCSS ?? subValueCSS,
+        )
+        console.log(
+          ` Current value: %c${String(value)}`,
+          props?.styles?.changeCSS ?? changeCSS,
+        )
+      }
 
-  function log<T>(value: T): void {
-    const clonedValue = JSON.parse(JSON.stringify(value))
-    const prevValueRef = useRef<T>()
+      console.groupEnd()
+    }
 
     if (ALLOWED_NODE_ENVS.includes(process.env.NODE_ENV ?? '')) {
       return (function logHooks() {