https://github.com/dotmind/react-use-pwa

Prompt to install Progressive Web App and more with React hooks.
https://github.com/dotmind/react-use-pwa

hooks pwa react tools

Last synced: 2 months ago
JSON representation

Prompt to install Progressive Web App and more with React hooks.

• Host: GitHub
• URL: https://github.com/dotmind/react-use-pwa
• Owner: dotmind
• License: mit
• Created: 2021-04-21T13:58:35.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-04-23T12:49:42.000Z (almost 4 years ago)
• Last Synced: 2024-09-23T13:07:15.265Z (4 months ago)
• Topics: hooks, pwa, react, tools
• Language: TypeScript
• Homepage:
• Size: 152 KB
• Stars: 27
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  





  @dotmind/react-use-pwa





  Prompt to install Progressive Web App and more with React hooks. Builded by .mind.io





  

    

  

  

    

  

  

    

  

  

    

  



## Menu

- [Menu](#menu)

- [✋ Disclaimer](#-disclaimer)

- [💻 Installation](#-installation)

- [👷‍♂️ How it's work](#️-how-its-work)

  - [usePwa usage](#usepwa-usage)

  - [usePwaAppSize usage](#usepwaappsize-usage)

- [⚡️ Contributing](#️-contributing)

- [🔐 License](#-license)

## ✋ Disclaimer

This package help to prompt to install and manage Progressive Web App (PWA) installed with React hooks.

Please check if your app have the required criteria before use : [web.dev/install-criteria](https://web.dev/install-criteria/#criteria)

Want to make a good PWA ? [Read this](https://web.dev/pwa-checklist/)

SSR support ✅

## 💻 Installation

```bash

yarn add @dotmind/react-use-pwa

```

or

```bash

npm i @dotmind/react-use-pwa --save

```

## 👷‍♂️ How it's work

### usePwa usage

```javascript

import { useEffect, useCallback  } from 'react';

import { usePwa } from '@dotmind/react-use-pwa';

const App = () => {

  const {

    installPrompt,

    isInstalled,

    isStandalone,

    isOffline,

    canInstall,

  } = usePwa();

  const handleInstallPrompt = useCallback(() => {

    if (canInstall) {

      installPrompt();

    }

  }, [canInstall, installPrompt]);

  if (isOffline) {

    return 
Please check your network 📶
;

  }


  if (!isInstalled || !isStandalone) {

    return (

      

        Hey install our app 👋

      

    );

  }

  return (

    
Welcome to our new app 🚀

  );

};


```

| | description | type |

|-|-|-|

| installPrompt | Show install prompt | `() => Promise` |

| isInstalled | Is app installed on device | `boolean` |

| isStandalone | Is app run in standalone mode | `boolean` |

| isOffline | Is app run in offline mode | `boolean` |

| canInstall | Device can install app | `boolean` |

| userChoice | Prompt user choice | `'accepted' \| 'dismissed' \| 'unknow'` |

### usePwaAppSize usage

Choose app launching width and height (only in desktop standalone mode).

```javascript

import { usePwaAppSize } from '@dotmind/react-use-pwa';

const App = () => {

  usePwaAppSize(400, 560);

  return ;

};

```

| arguments | description | required | default value |

|-|-|-|-|

| width | App width | false | `800` |

| height | App height | false | `800` |

| options | App options | false | `{ fixed: false }` |

**App options**

| option | description | type

|-|-|-|

| fixed | User can't resize app width & height | `boolean`

## ⚡️ Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

## 🔐 License

[MIT](https://choosealicense.com/licenses/mit/)