https://github.com/tschoffelen/react-update-popup
🔄 Ask users to refresh when there is a new version of the app available.
https://github.com/tschoffelen/react-update-popup
create-react-app react
Last synced: about 1 month ago
JSON representation
🔄 Ask users to refresh when there is a new version of the app available.
- Host: GitHub
- URL: https://github.com/tschoffelen/react-update-popup
- Owner: tschoffelen
- License: mit
- Created: 2020-09-05T11:34:41.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-10-31T02:32:51.000Z (7 months ago)
- Last Synced: 2024-11-26T09:12:03.726Z (6 months ago)
- Topics: create-react-app, react
- Language: TypeScript
- Homepage: https://flexible.agency
- Size: 3.72 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-update-popup
**Ask users to refresh when there is a new version of the app available.**
[](https://www.npmjs.com/package/react-update-popup)
[](https://github.com/flexible-agency/react-update-popup/blob/master/LICENSE)
## Install
```bash
yarn add react-update-popup
# or: npm install --save react-update-popup
```
## Usage
```tsx
import React, { Component } from 'react'
import { UpdateNotification } from 'react-update-popup'
const Example = () => (
{
// Optionally do something custom to check if an update is available.
// Called every 120 seconds.
// If you omit this, the default behaviour is to check if `index.html`
// has changed, which is the case with most bundlers.
return true // tell it an update is available
}}
/>
)
```
## Styling
By default, the popup looks like this:
Update it to fit within your application by:
- Using the component props to change the text of the popup
- Adding custom CSS for class `.update-notification-popup` to restyle the popup
## Props
All props are optional, and can be used to change the appearance of the popup.
- string `title` - popup title, wrapped in `
`
- string `description` - popup description text, wrapped in `
`
- string `buttonText` - button text
- number `refreshInterval` - how often to check, defaults to `120_000` (2 minutes)
- function `checkHasUpdate` - replace default update check behaviour (returns boolean `hasUpdate`)
- function `onReload` - replace default reload behaviour
## Authors
This library is developed by [Includable](https://includable.com), a creative app development agency.
- Thomas Schoffelen, [@tschoffelen](https://twitter.com/tschoffelen)