{"id":13433288,"url":"https://github.com/samdenty/console-feed","last_synced_at":"2026-03-15T19:18:28.626Z","repository":{"id":31818152,"uuid":"128574172","full_name":"samdenty/console-feed","owner":"samdenty","description":"Captures console.log's into a React Component 🔥","archived":false,"fork":false,"pushed_at":"2025-04-23T22:28:19.000Z","size":1110,"stargazers_count":734,"open_issues_count":47,"forks_count":117,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-05T20:53:00.409Z","etag":null,"topics":["hacktoberfest"],"latest_commit_sha":null,"homepage":"https://stackblitz.com/~/github.com/samdenty/console-feed","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/samdenty.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-04-07T22:34:46.000Z","updated_at":"2025-04-27T19:41:18.000Z","dependencies_parsed_at":"2023-02-18T16:00:58.080Z","dependency_job_id":"b4d0f716-a92e-429f-b96b-1e15ed662127","html_url":"https://github.com/samdenty/console-feed","commit_stats":{"total_commits":163,"total_committers":30,"mean_commits":5.433333333333334,"dds":0.5398773006134969,"last_synced_commit":"a63ab89f8f793987d0457f2bad235482bd817b3f"},"previous_names":["samdenty99/console-feed"],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samdenty%2Fconsole-feed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samdenty%2Fconsole-feed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samdenty%2Fconsole-feed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samdenty%2Fconsole-feed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/samdenty","download_url":"https://codeload.github.com/samdenty/console-feed/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254069694,"owners_count":22009558,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest"],"created_at":"2024-07-31T02:01:23.656Z","updated_at":"2026-03-15T19:18:28.620Z","avatar_url":"https://github.com/samdenty.png","language":"TypeScript","funding_links":["https://github.com/sponsors/samdenty"],"categories":["TypeScript"],"sub_categories":[],"readme":"# console-feed [![Sponsors](https://img.shields.io/github/sponsors/samdenty?label=Sponsors)](https://github.com/sponsors/samdenty)\n\n[Sponsor this project](https://github.com/sponsors/samdenty)\n\n[![npm version](https://img.shields.io/npm/v/console-feed.svg?style=flat-square)](https://www.npmjs.com/package/console-feed)\n[![npm downloads](https://img.shields.io/npm/dm/console-feed.svg?style=flat-square)](https://www.npmjs.com/package/console-feed)\n[![Demo](https://img.shields.io/badge/StackBlitz-Demo-yellow.svg?style=flat-square)](https://stackblitz.com/github/samdenty/console-feed?file=demo%2Fpublic%2Fiframe.html)\n\nA React component that displays console logs from the current page, an iframe or transported across a server.\n\n![Demo](https://user-images.githubusercontent.com/13242392/38513414-1bc32870-3c26-11e8-9a8f-0989d2142b1c.png)\n\n## Alternative to `console-feed`\n\nhttps://github.com/liriliri/chii supports the embedding the entire Chrome devtools.\n\nhttps://github.com/tachibana-shin/vue-console-feed is a fork for Vue.JS\n\n## Who's using it\n\n- [Firebase studio](https://studio.firebase.google.com)\n- [Tesla](https://github.com/teslamotors/informed)\n- [CodeSandbox.io](https://codesandbox.io)\n- [Framer](https://www.framer.com)\n- [Plunker](https://plnkr.co)\n- [P5.js Editor](https://editor.p5js.org)\n- [Builder.io](https://builder.io)\n- [Utopia](https://utopia.app/project)\n- [facebook/flipper](https://github.com/facebook/flipper)\n- [Effector playground](https://share.effector.dev/)\n\n## Features\n\n- **Console formatting** - [style and give your logs color](https://stackoverflow.com/questions/22155879/how-do-i-create-formatted-javascript-console-log-messages), and makes links clickable\n- **DOM nodes** - easily inspect \u0026 expand HTML elements, with syntax highlighting\n- **`console.table`** - view your logs in a table format\n- **Other console methods**:\n  - `console.time` - view the time in milliseconds it takes to complete events\n  - `console.assert` - assert that a statement is truthy\n  - `console.count` - count how many times something occurs\n- **Inbuilt JSON serialization** - Objects, Functions \u0026 DOM elements can be encoded / decoded to and from JSON\n\n## Install\n\n```sh\nyarn add console-feed\n# or\nnpm install console-feed\n```\n\n## Basic usage\n\n[StackBlitz](https://stackblitz.com/github/samdenty/console-feed?file=demo%2Fpublic%2Fiframe.html)\n\n```js\nimport React from 'react'\nimport { Hook, Console, Decode } from 'console-feed'\n\nclass App extends React.Component {\n  state = {\n    logs: [],\n  }\n\n  componentDidMount() {\n    Hook(window.console, (log) =\u003e {\n      this.setState(({ logs }) =\u003e ({ logs: [...logs, Decode(log)] }))\n    })\n\n    console.log(`Hello world!`)\n  }\n\n  render() {\n    return (\n      \u003cdiv style={{ backgroundColor: '#242424' }}\u003e\n        \u003cConsole logs={this.state.logs} variant=\"dark\" /\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n```\n\nOR with hooks:\n\n```js\nimport React, { useState, useEffect } from 'react'\nimport { Console, Hook, Unhook } from 'console-feed'\n\nconst LogsContainer = () =\u003e {\n  const [logs, setLogs] = useState([])\n\n  // run once!\n  useEffect(() =\u003e {\n    const hookedConsole = Hook(\n      window.console,\n      (log) =\u003e setLogs((currLogs) =\u003e [...currLogs, log]),\n      false\n    )\n    return () =\u003e Unhook(hookedConsole)\n  }, [])\n\n  return \u003cConsole logs={logs} variant=\"dark\" /\u003e\n}\n\nexport { LogsContainer }\n```\n\n## Props for `\u003cConsole /\u003e` component\n\n### `logs: Log[]`\n\nAn array consisting of Log objects. Required\n\n### `filter?: Methods[]`\n\nFilter the logs, only displaying messages of certain methods.\n\n### `variant?: 'light' | 'dark'`\n\nSets the font color for the component. Default - `light`\n\n### `styles?: Styles`\n\nDefines the custom styles to use on the component - see [`Styles.d.ts`](https://github.com/samdenty/console-feed/blob/master/src/definitions/Styles.d.ts)\n\n### `searchKeywords?: string`\n\nA string value to filter logs\n\n### `logFilter?: Function`\n\nIf you want to use a custom log filter function, you can provide your own implementation\n\n### `components?: ComponentOverrides`\n\nTo fully customize layout and rendering of the console feed, you can provide your own React\ncomponents. Currently, only the `Message` component is customizable.\n\n## Log methods\n\nEach log has a method assigned to it. The method is used to determine the style of the message and for the `filter` prop.\n\n```ts\ntype Methods =\n  | 'log'\n  | 'debug'\n  | 'info'\n  | 'warn'\n  | 'error'\n  | 'table'\n  | 'clear'\n  | 'time'\n  | 'timeEnd'\n  | 'count'\n  | 'assert'\n```\n\n## `Log` object\n\nA log object consists of the following:\n\n```ts\ntype Logs = Log[]\n\ninterface Log {\n  // The log method\n  method: Methods\n  // The arguments passed to console API\n  data: any[]\n}\n```\n\n## Serialization\n\nBy 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 `\u003cConsole /\u003e` component, you need to call the `Decode()` method.\n\n### Disabling serialization\n\nIf the `Hook` function and the `\u003cConsole /\u003e` component are on the same origin, you can disable serialization to increase performance.\n\n```js\nHook(\n  window.console,\n  (log) =\u003e {\n    this.setState(({ logs }) =\u003e ({ logs: [...logs, log] }))\n  },\n  false\n)\n```\n\n### Limiting serialization\n\nYou can limit the number of keys/elements included when serializing objects/arrays.\n\n```js\nHook(\n  window.console,\n  (log) =\u003e {\n    this.setState(({ logs }) =\u003e ({ logs: [...logs, log] }))\n  },\n  true,\n  100 // limit to 100 keys/elements\n)\n```\n\n---\n\n## Developing\n\nTo run `console-feed` locally, simply run:\n\n```bash\nyarn\nyarn start\nyarn test:watch\n```\n\nHead 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamdenty%2Fconsole-feed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamdenty%2Fconsole-feed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamdenty%2Fconsole-feed/lists"}