Neurotic and Probably Misinformed

    hatchxr-console-feed

    2.8.8 • Public • Published

    console-feed

    npm version CircleCI npm downloads Demo

    A React component that displays console logs from the current page, an iframe or transported across a server.

    Demo

    Who's using it

    Features

    • Console formatting - style and give your logs color, and makes links clickable
    • DOM nodes - easily inspect & expand HTML elements, with syntax highlighting
    • console.table - view your logs in a table format
    • Other console methods:
      • console.time - view the time in milliseconds it takes to complete events
      • console.assert - assert that a statement is truthy
      • console.count - count how many times something occurs
    • Inbuilt JSON serialization - Objects, Functions & DOM elements can be encoded / decoded to and from JSON

    Install

    yarn add console-feed
    # or 
    npm install console-feed

    Basic usage

    CodeSandbox

    import React from 'react'
    import { Hook, Console, Decode } from 'console-feed'
     
    class App extends React.Component {
      state = {
        logs: []
      }
     
      componentDidMount() {
        Hook(window.console, log => {
          this.setState(({ logs }) => ({ logs: [...logs, Decode(log)] }))
        })
     
        console.log(`Hello world!`)
      }
     
      render() {
        return (
          <div style={{ backgroundColor: '#242424' }}>
            <Console logs={this.state.logs} variant="dark" />
          </div>
        )
      }
    }

    Props

    logs: Log[]

    An array consisting of Log objects. Required

    filter?: Methods[]

    Filter the logs, only displaying messages of certain methods.

    variant?: 'light' | 'dark'

    Sets the font color for the component. Default - light

    style?: Styles

    Defines the custom styles to use on the component - see Styles.d.ts

    searchKeywords?: string

    A string value to filter logs

    logFilter?: Function

    If you want to use a custom log filter function, you can provide your own implementation

    Log methods

    Each log has a method assigned to it. The method is used to determine the style of the message and for the filter prop.

    type Methods = 
      | 'log'
      | 'warn'
      | 'error'
      | 'info'
      | 'debug'
      | 'command'
      | 'result'

    Log object

    A log object consists of the following:

    type Logs = Log[]
     
    interface Log {
      // The log method
      method: Methods
      // The arguments passed to console API
      data: any[]
    }

    Serialization

    When using the Hook() API, logs are serialized so that they will safely work with JSON.stringify. All the Circular references have already been handled for you.

    In order to restore a log back to format compatible with the <Console> component, you need to use the Decode() method.

    For example:

    import { Hook, Decode } from 'console-feed'
     
    Hook(window.console, log => {
      const parsed = Decode(log)
      const json = JSON.stringify(log)
     
      const original = Decode(JSON.parse(json))
     
      // parsed === original
    })

    Developing

    To run console-feed locally, simply run:

    yarn
    yarn start
    yarn test:watch

    Head over to http://localhost:3000 in your browser, and you'll see the demo page come up. After you make changes you'll need to reload, but the jest tests will automatically restart.

    Install

    npm i hatchxr-console-feed

    DownloadsWeekly Downloads

    4

    Version

    2.8.8

    License

    MIT

    Unpacked Size

    141 kB

    Total Files

    51

    Last publish

    Collaborators

    • hars_shhh