{"id":15130382,"url":"https://github.com/r-o-b-e-r-t-o-d-e-v/react-logging-system","last_synced_at":"2026-01-30T00:42:40.692Z","repository":{"id":253219397,"uuid":"841601908","full_name":"r-o-b-e-r-t-o-d-e-v/react-logging-system","owner":"r-o-b-e-r-t-o-d-e-v","description":"This library is an implementation of a simple logging system for React. It includes the logging system itself and also a banner component to show the current log.","archived":false,"fork":false,"pushed_at":"2024-08-15T08:11:38.000Z","size":44,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-08T23:03:56.629Z","etag":null,"topics":["github-actions","react","scss","typescript","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/r-o-b-e-r-t-o-d-e-v.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2024-08-12T18:26:31.000Z","updated_at":"2024-08-15T08:11:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"25eb7137-5798-4f05-921e-32a627b0330c","html_url":"https://github.com/r-o-b-e-r-t-o-d-e-v/react-logging-system","commit_stats":null,"previous_names":["r-o-b-e-r-t-o-d-e-v/react-logging-system"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/r-o-b-e-r-t-o-d-e-v/react-logging-system","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/r-o-b-e-r-t-o-d-e-v%2Freact-logging-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/r-o-b-e-r-t-o-d-e-v%2Freact-logging-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/r-o-b-e-r-t-o-d-e-v%2Freact-logging-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/r-o-b-e-r-t-o-d-e-v%2Freact-logging-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/r-o-b-e-r-t-o-d-e-v","download_url":"https://codeload.github.com/r-o-b-e-r-t-o-d-e-v/react-logging-system/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/r-o-b-e-r-t-o-d-e-v%2Freact-logging-system/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28892059,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-29T21:06:44.224Z","status":"ssl_error","status_checked_at":"2026-01-29T21:06:42.160Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["github-actions","react","scss","typescript","webpack"],"created_at":"2024-09-26T02:46:35.231Z","updated_at":"2026-01-30T00:42:40.687Z","avatar_url":"https://github.com/r-o-b-e-r-t-o-d-e-v.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Logging System\n\nThis library is an implementation of a simple logging system for React.\n\nIt consists in two parts:\n- logging-system: Will handle the logic.\n- banner-component: Will handle the UI.\n\n## logging-system\n__LoggerContext__\n\nThe LoggerContext will manage the creation of a React context and the\n  definition of interfaces for the both log observer and log producer.\n- __Log Observer__: This part of the LoggerContext allow other pieces\n  of code retrieve the current log and, in the case of a React\n  component, react when a new log comes in. For a quick overview on\n  how to make use of this, check the [banner-component](#banner-component)\n  section below.\n- __Log Producer__: This is the other part of the LoggerContext, it\n  allows to produce new log messages that will be processed by the\n  LoggerProvider. To produce new logs you should use 'useLogger' from\n  'LoggerProducerScope':\n  ```\n  import {LoggerProducerScope} from \"react-logging-system\";\n  import useLogger = LoggerProducerScope.useLogger;\n  ```\n\n__LoggerProvider__\n\nThis piece of code will implement the interfaces\nmentioned above and will do the setup of the LoggerContext.Provider,\nhence the user only needs to wrap the tsx code with the tag 'LoggerProvider'.\n\nIt also accepts the user to specify if the logs should also be printed\nin the JS console by the prop parameter 'printConsole'.\nThis is an optional parameter. If omitted, the log will not be printed\nin the JS console.\n```\n\u003cLoggerProvider printConsole={true}\u003e\n...\n\u003c/LoggerProvider\u003e\n```\n\n## banner-component\n__BannerComponent__ is a React component that implement the previous\nmentioned Log observer to render the current log as a banner that\nwill pop up for a few seconds.\n\nThe banner has a map of colours representing the different types of\nlogs available in the logging system. Basically it shows the regular\nmessages with a green coloured background, uses an orange one for\nwarnings and a red for the errors.\n\nTo make use of the component just add the tag \u003cBannerComponent/\u003e to\nyour tsx code (it must be inside a \u003cLoggerProvider\u003e tag)\n\nHere is an example of use:\n```\nexport default function App() {\n\n    return \u003cdiv className=\"app-container\"\u003e\n        \u003cLoggerProvider printConsole={true}\u003e\n            ...\n            \u003cBannerComponent /\u003e\n        \u003c/LoggerProvider\u003e\n    \u003c/div\u003e;\n}\n```\n\nThe BannerComponent has a prop parameter to allow customizing the duration\nit will be shown in screen. It can be used this way:\n```\n\u003cBannerComponent logBannerDuration={1000}/\u003e\n```\nThe duration is set in ms, being a value of 1000 equivalent to 1 second.\n\nThis parameter is optional, if it is not specified, the default\nduration of the banner will be 3000 ms.\n\nThis BannerComponent is not mandatory to use. The user of the library\nmay want to implement their own component. For that, just bypass the\nuse of the \u003cBannerComponent /\u003e tag and, in the custom component, use\n'useLogger' from 'LoggerObserverScope' to access the part of the\nLoggerContext that will allow to retrieve the current log:\n```\nimport {LoggerObserverScope, LogType} from \"../../logging-system/LoggerContext\";\nimport useLogger = LoggerObserverScope.useLogger;\n```\n\n## Deployment\nThe library is not published at npm but intended to be accessible via\nGitHub.\n\nThe workaround is the use of a Github action (see '_.github/workflows/build-dist.yml_')\nthat will be triggered when there is a new push a commit into main branch.\n\nThis action will build and deploy the library distribution files in a\nbranch labeled as 'dist'. At the end, there will be a 'main' branch with\nthe library development project and a 'dist' branch with the minimum\nnecessary files for the distribution of the library.\n\nEvery commit into this 'dist' branch will be accompanied by a tag, that will\nhelp to maintain a version control for every modification on the library.\n\n## Installing the library\n\nFor a project to install the library simply run:\n```\nnpm i github:r-o-b-e-r-t-o-d-e-v/react-logging-system#\u003ctag_version\u003e\n```\n\nExample:\n```\nnpm i github:r-o-b-e-r-t-o-d-e-v/react-logging-system#v1.0.0\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fr-o-b-e-r-t-o-d-e-v%2Freact-logging-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fr-o-b-e-r-t-o-d-e-v%2Freact-logging-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fr-o-b-e-r-t-o-d-e-v%2Freact-logging-system/lists"}