A React component that displays console logs from the current page, an iframe or transported across a server
npm install @builder.io/console-feed



A React component that displays console logs from the current page, an iframe or transported across a server.
!Demo
- CodeSandbox.io
- Framer
- Plunker
- P5.js Editor
- 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
``sh`
yarn add console-feedor
npm install console-feed
`js
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 (
Props for
component$3
An array consisting of Log objects. Required
$3
Filter the logs, only displaying messages of certain methods.
$3
Sets the font color for the component. Default -
light$3
Styles.d.ts$3
A string value to filter logs
$3
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.`ts
type Methods =
| 'log'
| 'warn'
| 'error'
| 'info'
| 'debug'
| 'command'
| 'result'
`Log objectA log object consists of the following:
`ts
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 component, you need to call the Decode() method.$3
If the
Hook function and the component are on the same origin, you can disable serialization to increase performance.`js
Hook(
window.console,
log => {
this.setState(({ logs }) => ({ logs: [...logs, log] }))
},
false
)
`---
Developing
To run
console-feed locally, simply run:`bash
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.