{"id":17497266,"url":"https://github.com/moox/react-topbar-progress-indicator","last_synced_at":"2025-04-06T11:08:21.600Z","repository":{"id":6279187,"uuid":"54505192","full_name":"MoOx/react-topbar-progress-indicator","owner":"MoOx","description":"`topbar` progress indicator as a React component","archived":false,"fork":false,"pushed_at":"2023-01-09T04:02:46.000Z","size":655,"stargazers_count":109,"open_issues_count":2,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-30T10:07:59.229Z","etag":null,"topics":["react","react-component","topbar"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/MoOx.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":null,"support":null},"funding":{"tidelift":"npm/react-topbar-progress-indicator","github":"MoOx","ko_fi":"moox__","custom":"https://www.paypal.com/paypalme/MoOx"}},"created_at":"2016-03-22T20:04:59.000Z","updated_at":"2024-08-28T08:33:57.000Z","dependencies_parsed_at":"2023-01-13T13:55:22.625Z","dependency_job_id":null,"html_url":"https://github.com/MoOx/react-topbar-progress-indicator","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoOx%2Freact-topbar-progress-indicator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoOx%2Freact-topbar-progress-indicator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoOx%2Freact-topbar-progress-indicator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoOx%2Freact-topbar-progress-indicator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MoOx","download_url":"https://codeload.github.com/MoOx/react-topbar-progress-indicator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247471520,"owners_count":20944158,"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":["react","react-component","topbar"],"created_at":"2024-10-19T15:38:06.597Z","updated_at":"2025-04-06T11:08:21.571Z","avatar_url":"https://github.com/MoOx.png","language":"JavaScript","funding_links":["https://tidelift.com/funding/github/npm/react-topbar-progress-indicator","https://github.com/sponsors/MoOx","https://ko-fi.com/moox__","https://www.paypal.com/paypalme/MoOx","https://tidelift.com/security"],"categories":[],"sub_categories":[],"readme":"# react-topbar-progress-indicator\n\n[![Build Status](https://github.com/MoOx/react-topbar-progress-indicator/workflows/Build/badge.svg)](https://github.com/MoOx/react-topbar-progress-indicator/actions)\n[![Version](https://img.shields.io/npm/v/react-topbar-progress-indicator.svg)](https://github.com/MoOx/react-topbar-progress-indicator/blob/master/CHANGELOG.md)\n\n\u003e `topbar` progress indicator as a React component\n\nWill simply `show()` and `hide()` [topbar](https://github.com/buunguyen/topbar)\nwhen the component is respectively mounted and unmounted.\n\n**Since topbar is a singleton, using `\u003cTopBarProgress /\u003e` multiples times will\ntake this in consideration. This means that `hide()` will only be called when\nall `\u003cTopBarProgress /\u003e` have been unmounted.**\n\nFor example, if you render 2 `\u003cTopBarProgress /\u003e` and unmount one (eg: you are doing 2\nasync things and only once is done), `hide()` won't be called.\nYou will need to have both instances unmounted.\n\n## Installation\n\n```console\nnpm install react-topbar-progress-indicator\n## or\nyarn add react-topbar-progress-indicator\n```\n\n## Usage\n\n```js\nimport TopBarProgress from \"react-topbar-progress-indicator\";\n\nTopBarProgress.config({\n  barColors: {\n    \"0\": \"#fff\",\n    \"1.0\": \"#fff\"\n  },\n  shadowBlur: 5\n});\n\nconst YourThing = () =\u003e {\n  return \u003cdiv\u003e{this.state.loading \u0026\u0026 \u003cTopBarProgress /\u003e}\u003c/div\u003e;\n};\n```\n\n### Config\n\nSince `topbar` is a singleton, you should configure via `Topbar.config()`.\n\n#### `barThickness` (Integer, px)\n\nThe progress bar thickness in `px` (default: 3).\n\n#### `barColors` (Object { progress: color })\n\nObject of gradient color stops used to draw the progress bar.\n\nExample:\n\n```js\n  barColors: {\n    \"0\": \"#f00\",\n    \"0.5\": \"#0f0\",\n    \"1.0\": \"#00f\",\n  },\n```\n\n#### `shadowBlur`\n\nInteger of the shadow blur in `px` (default: `10`).\n\n#### `shadowColor`\n\nString that represent the shadow color (hexa, default: `#000`).\n\n---\n\n## Changelog\n\nCheck the [changelog](./CHANGELOG.md) for more informations about recent\nreleases.\nYou might also find [releases notes on GitHub](https://github.com/MoOx/react-topbar-progress-indicator/releases).\n\n## Contribute\n\n_⇄ Pull requests and ★ Stars are always welcome._\n\nPlease read the [contribution guidelines](./CONTRIBUTING.md) before contributing.\n\n## Code of Conduct\n\nWe want the community to be friendly and respectful to each other. Please read\n[our full code of conduct](./CODE_OF_CONDUCT.md) so that you can understand what\nactions will and will not be tolerated.\n\n## License\n\n[MIT](./LICENSE)\n\n## Security contact information\n\nTo report a security vulnerability, please use the\n[Tidelift security contact](https://tidelift.com/security).\nTidelift will coordinate the fix and disclosure.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoox%2Freact-topbar-progress-indicator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmoox%2Freact-topbar-progress-indicator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoox%2Freact-topbar-progress-indicator/lists"}