@penpad/plugin-logger

@penpad/plugin-logger

Logger plugin for Penpad

Usage

Add <LoggerPlugin /> to your Penpad component.

import { LoggerPlugin } from '@penpad/plugin-logger'

<Penpad>
  <LoggerPlugin />

  {/* other Penpad definitioms here */}
</Penpad>

Logging entries

Use the useLogger() React hook to return a logging function.

import { useLogger } from '@penpad/plugin-logger'

const YourComponent = () => {
  const log = useLogger()

  return (
    <button
      onClick={() => {
        log('Clicked!')
      }}
    >
      Click me!
    </button>
  )
}

Logging entries in class components

There is also a <UseLogger> render prop component.

import { UseLogger } from '@penpad/plugin-logger'

<UseLogger>
  {({ log }) => (
    <Specimen id='Another specimen'>
      <button
        onClick={() => {
          log('Hello, I was clicked on ' + new Date().toString())
        }}
      >
        Click me
      </button>
    </Specimen>
  )}
</UseLogger>