{"id":24317958,"url":"https://github.com/abdheshnayak/react-highlightjs-logs","last_synced_at":"2025-09-27T03:31:09.305Z","repository":{"id":54012350,"uuid":"521992228","full_name":"abdheshnayak/react-highlightjs-logs","owner":"abdheshnayak","description":"Lightweight, Easy to use logs component built on reactjs.","archived":false,"fork":false,"pushed_at":"2023-09-29T08:52:10.000Z","size":1132,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-16T03:50:08.536Z","etag":null,"topics":["highlightjs","logs","react","render","viewport"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-highlightjs-logs","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/abdheshnayak.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}},"created_at":"2022-08-06T16:03:28.000Z","updated_at":"2024-09-28T09:18:28.000Z","dependencies_parsed_at":"2022-08-13T06:00:46.056Z","dependency_job_id":"4596fea9-c876-4ff9-92c4-5a9d85abb630","html_url":"https://github.com/abdheshnayak/react-highlightjs-logs","commit_stats":{"total_commits":42,"total_committers":1,"mean_commits":42.0,"dds":0.0,"last_synced_commit":"7816bcbb71317786189fd590913d4aa8a2c0a1e6"},"previous_names":["opensource-hq/react-highlightjs-logs","abdheshnayak/react-highlightjs-logs","alphadevhq/react-highlightjs-logs"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abdheshnayak%2Freact-highlightjs-logs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abdheshnayak%2Freact-highlightjs-logs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abdheshnayak%2Freact-highlightjs-logs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abdheshnayak%2Freact-highlightjs-logs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/abdheshnayak","download_url":"https://codeload.github.com/abdheshnayak/react-highlightjs-logs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234376928,"owners_count":18822417,"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":["highlightjs","logs","react","render","viewport"],"created_at":"2025-01-17T14:35:50.489Z","updated_at":"2025-09-27T03:31:03.954Z","avatar_url":"https://github.com/abdheshnayak.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React HighlightJs Logs\n\n![screenshot](./screenshot.png)\n\n## Demo\n\n[https://react-highlightjs-logs.netlify.app/](https://react-highlightjs-logs.netlify.app/)\n[code-sandbox](https://r3r5y4.csb.app)\n\n## Usage\n\n### Installation\nRun the following command in your terminal to install the package.\n\n```bash\nnpm i react-highlightjs-logs\n```\n\n### Importing\nYou can import the component as shown below.\n```javascript\nimport { HighlightJsLogs } from \"react-highlightjs-logs\"\n```\n\n### Importing Styles\nYou can import the component as shown below.\n```javascript\nimport 'react-highlightjs-logs/dist/index.css'\n```\n\n### Importing Themes\nThis package provides default theme that's tokyo-night which can be overriden by importing the theme of your choice from highlight.js website. for that you have to add one attribute `removeDefaultTheme`\n\n```javascript\n\u003cHighlightJsLogs\n    removeDefaultTheme\n/\u003e\n```\n\nYou can also use any of the [highlight.js](https://github.com/highlightjs/highlight.js/tree/main/src/styles) themes. you can get themes from [highlight.js themes](https://github.com/highlightjs/highlight.js/tree/main/src/styles) or you visit the [highlight.js demo](https://highlightjs.org/static/demo) for more.\n\n\n\n#### With plain data\nIf you have plain data then you can use the component as shown below.\n```javascript\nfunction App() {\n  return (\n    \u003cdiv className=\"p-6\"\u003e\n      \u003cHighlightJsLogs \n        title=\"Last 24 hours logs\" \n        text={`your logs`}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n#### With url\nWith url you can use the component as shown below.\n```javascript\nfunction App() {\n  return (\n    \u003cdiv className=\"p-6\"\u003e\n      \u003cHighlightJsLogs \n        title=\"Last 24 hours logs\" \n        url=\"https://example.com\"\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### With websocket\nIf you wanna use with websocket then use as the shown below.\n```javascript\nfunction App() {\n  return (\n    \u003cdiv className=\"p-6\"\u003e\n      \u003cHighlightJsLogs \n        title=\"Last 24 hours logs\" \n        url=\"wss://example.com\" \n        websocket={true}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### enablesearch, follow, selectableLines\nYou can also enable searching, autoscroll to last line, and highlight line on hover by the following properties. \n```javascript\nfunction App() {\n  return (\n    \u003cdiv className=\"p-6\"\u003e\n      \u003cHighlightJsLogs \n        title=\"Last 24 hours logs\" \n        data=\"Hello World!\" \n        enablesearch={true} \n        follow={true} \n        selectableLines={true}\n        /\u003e\n    \u003c/div\u003e\n  );\n}\n```\nBy default all the values are true you can disable this by changing it's value to false.\n\n### Hide scrollbar\nYou can hide the scrollbar by simpaly adding noScrollBar attribute as shown below. The default value is false so scrollbar will be visible if you don't add.\n```javascript\nfunction App() {\n  return (\n    \u003cdiv className=\"p-6\"\u003e\n      \u003cHighlightJsLogs \n        title=\"Last 24 hours logs\" \n        data=\"Hello World!\" \n        noScrollBar\n        /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Width and Height\nYou need to specify width and height for better fit in your ui. by default width is 600px and height is 400px. you can specify these as shown below.\n```javascript\nfunction App() {\n  return (\n    \u003cdiv className=\"p-6\"\u003e\n      \u003cHighlightJsLogs \n        title=\"Last 24 hours logs\" \n        data=\"Hello World!\" \n        height='400px',\n        width='600px',\n        /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Font Size\nYou can also manage Font Size by adding fontSize property. It's Number value and can be provided as shown below. default fontSize is 14.\n\n```javascript\nfunction App() {\n  return (\n    \u003cdiv className=\"p-6\"\u003e\n      \u003cHighlightJsLogs \n          title=\"Last 24 hours logs\" \n          url={`/logs.txt`} \n          fontSize={14}\n        /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Define your own loading component\nYou can also define your own loading component as shown below.\n\n```javascript\nfunction App() {\n  return (\n    \u003cdiv className=\"p-6\"\u003e\n      \u003cHighlightJsLogs \n          title=\"Last 24 hours logs\" \n          url={`/logs.txt`} \n          fontSize={14}\n          loadingComponent={\u003cspan\u003eLoading...\u003c/span\u003e}\n        /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Define your own loading component\nDefine your action components easily by providing component to the property actionComponent as shown below.\n\n```javascript\nfunction App() {\n  return (\n    \u003cdiv className=\"p-6\"\u003e\n      \u003cHighlightJsLogs \n          title=\"Last 24 hours logs\" \n          url={`/logs.txt`} \n          actionComponent={\n            \u003cbutton\u003e\n              Refresh\n            \u003c/button\u003e\n          }\n        /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Technology\n- highlight.js for syntax highlighting\n- websocket for socket connection\n- axios for fetching url data\n- react-icons for icons\n- tailwindcss for design\n- tokyo-night default theme\n\n## Development and Contributing\nThis repository uses highlight.js, websocket, axios, react-icons and tailwindcss for developing, previewing and building react components. to get started\n\n- Fork and clone this repo\n- Install the dependencies with npm or pnpm\n- Start development server with npm start. This will launch a preview screen. Open a browser to http://localhost:3000 to preview the React Component.\n- Use CTRL-C to exit the preview.\n- Use npm run build to generate the compiled component for publishing to npm.\n\nFeel free to open an issue, submit a pull request, or contribute however you would like. Understand that this documentation is still a work in progress, so file and issue or submit a PR to ask questions or make imporvements. Thanks!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabdheshnayak%2Freact-highlightjs-logs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabdheshnayak%2Freact-highlightjs-logs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabdheshnayak%2Freact-highlightjs-logs/lists"}