{"id":21753717,"url":"https://github.com/tschoffelen/react-update-popup","last_synced_at":"2025-04-13T08:54:58.655Z","repository":{"id":57347022,"uuid":"293062965","full_name":"tschoffelen/react-update-popup","owner":"tschoffelen","description":"🔄 Ask users to refresh when there is a new version of the app available.","archived":false,"fork":false,"pushed_at":"2024-10-31T02:32:51.000Z","size":3899,"stargazers_count":4,"open_issues_count":6,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-26T09:12:03.726Z","etag":null,"topics":["create-react-app","react"],"latest_commit_sha":null,"homepage":"https://flexible.agency","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/tschoffelen.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}},"created_at":"2020-09-05T11:34:41.000Z","updated_at":"2024-09-24T07:46:04.000Z","dependencies_parsed_at":"2024-11-26T09:12:13.806Z","dependency_job_id":"cc43d7d8-48f4-43f3-b9e6-beb436c241ab","html_url":"https://github.com/tschoffelen/react-update-popup","commit_stats":null,"previous_names":["flexible-agency/react-update-popup","tschoffelen/react-update-popup"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tschoffelen%2Freact-update-popup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tschoffelen%2Freact-update-popup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tschoffelen%2Freact-update-popup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tschoffelen%2Freact-update-popup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tschoffelen","download_url":"https://codeload.github.com/tschoffelen/react-update-popup/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248688543,"owners_count":21145763,"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":["create-react-app","react"],"created_at":"2024-11-26T09:11:02.336Z","updated_at":"2025-04-13T08:54:58.649Z","avatar_url":"https://github.com/tschoffelen.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-update-popup\n\n**Ask users to refresh when there is a new version of the app available.**\n\n[![NPM](https://img.shields.io/npm/v/react-update-popup.svg)](https://www.npmjs.com/package/react-update-popup)\n[![GitHub license](https://img.shields.io/github/license/flexible-agency/react-update-popup.svg)](https://github.com/flexible-agency/react-update-popup/blob/master/LICENSE)\n\n## Install\n\n```bash\nyarn add react-update-popup\n# or: npm install --save react-update-popup\n```\n\n## Usage\n\n```tsx\nimport React, { Component } from 'react'\n\nimport { UpdateNotification } from 'react-update-popup'\n\nconst Example = () =\u003e (\n  \u003cUpdateNotification\n    checkHasUpdate={async () =\u003e {\n      // Optionally do something custom to check if an update is available.\n      // Called every 120 seconds.\n\n      // If you omit this, the default behaviour is to check if `index.html`\n      // has changed, which is the case with most bundlers.\n\n      return true // tell it an update is available\n    }}\n  /\u003e\n)\n```\n\n## Styling\n\nBy default, the popup looks like this:\n\n![Example](.github/example.png)\n\nUpdate it to fit within your application by:\n\n- Using the component props to change the text of the popup\n- Adding custom CSS for class `.update-notification-popup` to restyle the popup\n\n## Props\n\nAll props are optional, and can be used to change the appearance of the popup.\n\n- string `title` - popup title, wrapped in `\u003ch3\u003e`\n- string `description` - popup description text, wrapped in `\u003cp\u003e`\n- string `buttonText` - button text\n- number `refreshInterval` - how often to check, defaults to `120_000` (2 minutes)\n- function `checkHasUpdate` - replace default update check behaviour (returns boolean `hasUpdate`)\n- function `onReload` - replace default reload behaviour\n\n## Authors\n\nThis library is developed by [Includable](https://includable.com), a creative app development agency.\n\n- Thomas Schoffelen, [@tschoffelen](https://twitter.com/tschoffelen)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftschoffelen%2Freact-update-popup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftschoffelen%2Freact-update-popup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftschoffelen%2Freact-update-popup/lists"}