console-feed
    TypeScript icon, indicating that this package has built-in type declarations

    3.4.0 • Public • Published

    console-feed Sponsors

    Sponsor this project

    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>
        )
      }
    }

    OR with hooks:

    import React, { useState, useEffect } from 'react'
    import { Console, Hook, Unhook } from 'console-feed'
    
    const LogsContainer = () => {
      const [logs, setLogs] = useState([])
    
      // run once!
      useEffect(() => {
        Hook(
          window.console,
          (log) => setLogs((currLogs) => [...currLogs, log]),
          false
        )
        return () => Unhook(window.console)
      }, [])
    
      return <Console logs={logs} variant="dark" />
    }
    
    export { LogsContainer }

    Props for <Console /> component

    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

    styles?: 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'
      | 'debug'
      | 'info'
      | 'warn'
      | 'error'
      | 'table'
      | 'clear'
      | 'time'
      | 'timeEnd'
      | 'count'
      | 'assert'

    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

    By default when you use the Hook() API, logs are serialized so that they will safely work with JSON.stringify. In order to restore a log back to format compatible with the <Console /> component, you need to call the Decode() method.

    Disabling serialization

    If the Hook function and the <Console /> component are on the same origin, you can disable serialization to increase performance.

    Hook(
      window.console,
      (log) => {
        this.setState(({ logs }) => ({ logs: [...logs, log] }))
      },
      false
    )

    Limiting serialization

    You can limit the number of keys/elements included when serializing objects/arrays.

    Hook(
      window.console,
      (log) => {
        this.setState(({ logs }) => ({ logs: [...logs, log] }))
      },
      true,
      100 // limit to 100 keys/elements
    )

    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 console-feed

    DownloadsWeekly Downloads

    6,113

    Version

    3.4.0

    License

    MIT

    Unpacked Size

    245 kB

    Total Files

    91

    Last publish

    Collaborators

    • compuives
    • samdd