# react-update-popup

> Ask users to refresh when there is a new version of the app available.

Latest version **2.1.1** (published 2025-01-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-update-popup
pnpm add react-update-popup
yarn add react-update-popup
bun add react-update-popup
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; no vulnerabilities; has provenance.

Warnings: low downloads; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.1 |
| Published | 2025-01-14 |
| First published | 2020-09-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 11.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 4 |
| Author | Includable |
| Maintainers | tschoffelen |

## Links

- npm: https://www.npmjs.com/package/react-update-popup
- Repository: https://github.com/tschoffelen/react-update-popup
- Homepage: https://github.com/tschoffelen/lambda-sample-events#readme
- Issues: https://github.com/tschoffelen/lambda-sample-events/issues
- npm.io page: https://npm.io/package/react-update-popup

## Dependencies (1)

- [swr](https://npm.io/package/swr.md) ^2.3.0

## Recent versions

- 2.1.1 (latest) — 2025-01-14
- 2.1.0 — 2025-01-14
- 2.0.0 — 2024-12-31
- 1.0.3 — 2021-04-09
- 1.0.2 — 2020-11-10
- 1.0.1 — 2020-09-05
- 1.0.0 — 2020-09-05

## README

# react-update-popup

**Ask users to refresh when there is a new version of the app available.**

[![NPM](https://img.shields.io/npm/v/react-update-popup.svg)](https://www.npmjs.com/package/react-update-popup)
[![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)

## 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'
import 'react-update-popup/dist/index.css'

const Example = () => (
  <UpdateNotification
    checkHasUpdate={async () => {
      // 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:

![Example](.github/example.png)

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 `<h3>`
- string `description` - popup description text, wrapped in `<p>`
- 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)

---
_Source: https://npm.io/package/react-update-popup · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._