{"id":18813231,"url":"https://github.com/melloware/react-logviewer","last_synced_at":"2025-05-16T10:05:32.789Z","repository":{"id":183529874,"uuid":"670315121","full_name":"melloware/react-logviewer","owner":"melloware","description":"React LogViewer","archived":false,"fork":false,"pushed_at":"2025-05-12T11:26:50.000Z","size":12332,"stargazers_count":97,"open_issues_count":8,"forks_count":24,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-05-12T12:36:24.943Z","etag":null,"topics":["lazylogger","log","logviewer","react"],"latest_commit_sha":null,"homepage":"https://melloware.github.io/react-logviewer/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/melloware.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":"AUTHORS.MD","dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["melloware"]}},"created_at":"2023-07-24T19:17:09.000Z","updated_at":"2025-05-12T11:26:47.000Z","dependencies_parsed_at":"2023-11-27T03:30:58.938Z","dependency_job_id":"ad8a2eb4-1a63-42b0-afb7-b78ec0525967","html_url":"https://github.com/melloware/react-logviewer","commit_stats":null,"previous_names":["melloware/react-logviewer"],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/melloware%2Freact-logviewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/melloware%2Freact-logviewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/melloware%2Freact-logviewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/melloware%2Freact-logviewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/melloware","download_url":"https://codeload.github.com/melloware/react-logviewer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254509476,"owners_count":22082891,"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":["lazylogger","log","logviewer","react"],"created_at":"2024-11-07T23:36:48.831Z","updated_at":"2025-05-16T10:05:32.762Z","avatar_url":"https://github.com/melloware.png","language":"TypeScript","funding_links":["https://github.com/sponsors/melloware","https://www.paypal.me/mellowareinc"],"categories":[],"sub_categories":[],"readme":"[![npm](https://img.shields.io/npm/v/%40melloware%2Freact-logviewer?style=for-the-badge\u0026color=green)](https://www.npmjs.com/package/%40melloware/react-logviewer)\n[![NPM Downloads](https://img.shields.io/npm/dm/%40melloware%2Freact-logviewer?style=for-the-badge\u0026color=purple)](https://www.npmjs.com/package/%40melloware/react-logviewer)\n[![License: MPL 2.0](https://img.shields.io/badge/License-MPL_2.0-yellow.svg?style=for-the-badge)](https://opensource.org/licenses/MPL-2.0)\n![React.js](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge\u0026logo=react\u0026logoColor=%2361DAFB)\n![Typescript](https://img.shields.io/badge/typescript-%23323330.svg?style=for-the-badge\u0026logo=typescript\u0026logoColor=%23F7DF1E) \n\n# React LogViewer\n\nReact component that loads and views remote text in the browser lazily and efficiently. Logs can be loaded from static text, a URL, a WebSocket, or an EventSource and including ANSI highlighting.\nForked from [mozilla-frontend-infra/react-lazylog](https://github.com/mozilla-frontend-infra/react-lazylog).\n\n**If you like this project, please consider supporting me ❤️**\n\n[![GitHub Sponsor](https://img.shields.io/badge/GitHub-FFDD00?style=for-the-badge\u0026logo=github\u0026logoColor=black)](https://github.com/sponsors/melloware)\n[![PayPal](https://img.shields.io/badge/PayPal-00457C?style=for-the-badge\u0026logo=paypal\u0026logoColor=white)](https://www.paypal.me/mellowareinc)\n\n## Features\n\n-   Efficient scrolling performance thanks to [Virtua](https://github.com/inokawa/virtua)\n-   Infinite scrolling thanks to [Virtua](https://github.com/inokawa/virtua)\n-   Able to load large files upwards of 100MB without crashing the browser\n-   Parses, colorizes, and styles ANSI escapes within content\n-   Supports remote text files as well as chunked/streamed responses\n-   Line highlighting\n-   Customizable styling\n-   Searching through log\n-   Works in latest browser versions, including iOS Safari and Android Chrome\n-   TypeScript support\n\n## Demo\n\nYou can see a running demonstration at https://melloware.github.io/react-logviewer/ which is built from StoryBook.\n\n## Installation\n\nInstall the plugin with npm or yarn:\n\n```shell\n$ npm i --save @melloware/react-logviewer\n```\n\n## Getting started\n\nThe core component from react-logviewer is `LazyLog`. There is also a higher-order component (HOC) for\nfollowing logs until scroll. This module can be required via ES imports, CommonJS require, or UMD.\n\n```js\nimport { LazyLog } from \"@melloware/react-logviewer\";\n\n// using require\nconst { LazyLog } = require(\"@melloware/react-logviewer\");\n```\n\n## `\u003cLazyLog /\u003e`\n\n### Usage\n\nAfter importing a component, it can be rendered with the required `url` prop:\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport { LazyLog } from \"@melloware/react-logviewer\";\n\nrender(\u003cLazyLog url=\"http://example.log\" /\u003e, document.getElementById(\"root\"));\n```\n\nBy default the `LazyLog` will expand to fill its container, so ensure this container has valid dimensions and layout.\nIf you wish to have fixed dimensions, change the `height` and `width` props.\n\nIf you are going to be rendering a complete file, or an endpoint which can be downloaded all at once, use the\n`\u003cLazyLog /\u003e` component as-is for better overall performance at the expense of slightly longer upfront load time.\n\nIf you are going to be requesting a streaming or chunked response, use the `\u003cLazyLog stream /\u003e` component with the\n`stream` prop of `true` for quicker upfront rendering as content can be decoded as it arrives.\n\n## `\u003cScrollFollow /\u003e`\n\n`ScrollFollow` is a higher-order component (HOC) that aims to simplify toggling a `LazyLog`'s\n\"follow\" functionality based on user scrolling.\n\n### Usage\n\nThe `ScrollFollow` component accepts a render prop function which should return a component to render based on the\nfunction's arguments.\n\n\u003e [!NOTE]  \n\u003e ScrollFollow must be wrapped in an element that contains a fixed height such as a `\u003cdiv\u003e`\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport { LazyLog, ScrollFollow } from \"@melloware/react-logviewer\";\n\nrender(\n    \u003cdiv style={{ height: 500, width: 902 }}\u003e\n    \u003cScrollFollow\n        startFollowing={true}\n        render={({ follow, onScroll }) =\u003e (\n            \u003cLazyLog url=\"http://example.log\" stream follow={follow} onScroll={onScroll} /\u003e\n        )}\n    /\u003e\n    \u003c/div\u003e,\n    document.getElementById(\"root\"),\n);\n```\n\n## Styling\n\nAll of the components exposed from react-lazylog use CSS modules to contain its styles to each individual component. If\nyou wish to override these styles, there are a few techniques you can use.\n\n### `style` and `containerStyle`\n\nFor the core container of `\u003cLazyLog /\u003e`, you can pass a `style` object prop to affect many styles.\nFor affecting the look or behavior of the scrollable region of these components, use the `containerStyle` prop with a\nstyling object.\n\n### `defaultProps.style`\n\nFor many react-logviewer components, continually passing varied styling objects is tedious. To make this simpler, you can\noverride the `defaultProps.style` of any desired component to override styles of that component. For example:\n\n```jsx\nimport Line from \"@melloware/react-logviewer/build/Line\";\n\n// Use defaultProps.style to set the style for an internal component\nLine.defaultProps.style = {\n    color: \"green\",\n};\n```\n\n**Note: overriding the ANSI colors and styles is currently undocumented, and will probably need some source-diving to\nfigure out. I would gladly accept a pull request that could improve the styling API.**\n\n### CSS stylesheets\n\nIf you are using CSS stylesheets, you can target the main virtual `LazyList` component with the `react-lazylog`\nclass name. From there you can target the individual `div` lines, `a` line numbers, or `span` line content.\n\n## Sub-components\n\nreact-lazylog uses a number of sub-components internally to render individual parts of the log-viewing component:\n\n### `\u003cLine /\u003e`\n\nA single row of content, containing both the line number and any text content within the line.\n\n### `\u003cLineNumber /\u003e`\n\nThe line number of a single line. The anchor contained within is interactive, and will highlight the entire line upon\nselection.\n\n### `\u003cLineContent /\u003e`\n\nThe container of all the individual pieces of content that is on a single line. May contain one or more `LinePart`s\ndepending on ANSI parsing.\n\n### `\u003cLinePart /\u003e`\n\nAn individual segment of text within a line. When the text content is ANSI-parsed, each boundary is placed within its\nown `LinePart` and styled separately (colors, text formatting, etc.) from the rest of the line's content.\n\n## Technology\n\n-   [Virtua](https://github.com/inokawa/virtua) for efficiently rendering large lines of data\n-   `fetch` API for efficiently requesting data with array buffers and binary streams\n-   [ansiparse](https://www.npmjs.com/package/ansiparse) for nice log styling, like Travis\n-   [mitt](https://www.npmjs.com/package/mitt) for dead-simple events to manage streaming lifecycle\n-   [Immutable](https://www.npmjs.com/package/immutable) for efficiently storing and managing very large collections of lines and highlight ranges\n-   `Uint8Array` for dealing with text content as binary, allows for conditionally rendering partial data and decoding everything without crashing your browser\n\n## Development and Contributing\n\n-   Fork and clone this repo.\n-   Install the dependencies with `npm`.\n-   Start the development server with `npm run storybook`. This will launch a StoryBook instance.\n    Open a browser to http://localhost:6006 to preview the React components.\n-   Use CTRL-C to exit the StoryBook.\n-   Use `npm run build` to generate the compiled component for publishing to npm.\n  \n## Publishing\n\nAdjust the version in the `package.json` if necessary, then\n\n```bash\nnpm login\n# This will run npm run build automatically\nnpm publish --access public\n```\n\nThen upload code to github, create tag \u0026 release.\n\n## License\n\nLicensed under the [Mozilla Public License 2.0](https://opensource.org/license/mpl-2-0/) license.\n\n`SPDX-License-Identifier: Mozilla Public License 2.0`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmelloware%2Freact-logviewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmelloware%2Freact-logviewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmelloware%2Freact-logviewer/lists"}