{"_id":"@delwiv/react-pwa-installer-prompt","name":"@delwiv/react-pwa-installer-prompt","dist-tags":{"latest":"1.0.9"},"versions":{"1.0.9":{"name":"@delwiv/react-pwa-installer-prompt","version":"1.0.9","description":"Provide your own custom install flow, directly within your app.","homepage":"https://github.com/shnaveen25/react-pwa-installer-prompt#readme","author":{"name":"Naveen"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/shnaveen25/react-pwa-installer-prompt.git"},"main":"dist/index.js","module":"dist/index.modern.js","source":"src/index.js","engines":{"node":">=10"},"scripts":{"build":"microbundle-crl --no-compress --format modern,cjs","start":"microbundle-crl watch --no-compress --format modern,cjs","prepare":"run-s build","test":"run-s test:unit test:lint test:build","test:build":"run-s build","test:lint":"echo \"No test specified\"","test:unit":"echo \"No test specified\"","test:watch":"echo \"No test specified\"","predeploy":"cd example && yarn install && yarn run build","deploy":"gh-pages -d example/build"},"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"devDependencies":{"babel-eslint":"^10.1.0","cross-env":"^7.0.3","eslint":"^8.57.0","eslint-config-prettier":"^9.1.0","eslint-config-standard":"^17.1.0","eslint-config-standard-react":"^13.0.0","eslint-plugin-import":"^2.29.1","eslint-plugin-node":"^11.1.0","eslint-plugin-prettier":"^5.1.3","eslint-plugin-promise":"^6.1.1","eslint-plugin-react":"^7.33.2","eslint-plugin-standard":"^5.0.0","gh-pages":"^6.1.1","microbundle-crl":"^0.13.11","npm-run-all":"^4.1.5","prettier":"^3.2.5","react-scripts":"^5.0.1"},"bugs":{"url":"https://github.com/shnaveen25/react-pwa-installer-prompt/issues"},"directories":{"example":"example"},"dependencies":{"np":"^9.2.0","prop-types":"^15.8.1"},"keywords":["PWA","add to home screen","Progressive Web App","in-app instal","in-app prompt","install","react-component","react"],"_id":"@delwiv/react-pwa-installer-prompt@1.0.9","gitHead":"43ab481b4165214f74f0695ba9b6e8c70f3b89d2","_nodeVersion":"18.18.0","_npmVersion":"10.4.0","dist":{"integrity":"sha512-c3GhqG44tAdnuuopWgHB87Fc1sV0no59KL2vUpx104cmHOPaV7dhDBuvUsd5jNR7sdJ31+2xzQ6kNEnsrAHMfw==","shasum":"684e3704758c1a08028274d3e3802fcd7095c1de","tarball":"https://registry.npmjs.org/@delwiv/react-pwa-installer-prompt/-/react-pwa-installer-prompt-1.0.9.tgz","fileCount":7,"unpackedSize":27959,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAdXrDu8DptIG4Lbw9FEg1pyJQXuWQ20SY4qHPskyIHkAiAQYzwd/1Y9XseoZIJkI7qOP3b3G4EhyEBYi42gOObEnA=="}]},"_npmUser":{"name":"delwiv","email":"delwiv@gmail.com"},"maintainers":[{"name":"delwiv","email":"delwiv@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-pwa-installer-prompt_1.0.9_1708954133182_0.39913789353319795"},"_hasShrinkwrap":false}},"time":{"created":"2024-02-26T13:28:53.095Z","1.0.9":"2024-02-26T13:28:53.347Z","modified":"2024-02-26T13:28:53.811Z"},"maintainers":[{"name":"delwiv","email":"delwiv@gmail.com"}],"description":"Provide your own custom install flow, directly within your app.","homepage":"https://github.com/shnaveen25/react-pwa-installer-prompt#readme","keywords":["PWA","add to home screen","Progressive Web App","in-app instal","in-app prompt","install","react-component","react"],"repository":{"type":"git","url":"git+https://github.com/shnaveen25/react-pwa-installer-prompt.git"},"author":{"name":"Naveen"},"bugs":{"url":"https://github.com/shnaveen25/react-pwa-installer-prompt/issues"},"license":"MIT","readme":"\n## **react-pwa-installer-prompt**\n\nProvide your own custom install flow, directly within your app,  Progressive Web App (PWA) directly within the user interface of your app makes easier for users to install your PWA on their mobile or desktop device. \n    \n## Package is helpfull for\n\n**In-app install flow** : Even though most of the browser provides an option to Add to home screen, some users don't realize that they can install a PWA. It can be helpful to provide an in-app experience. So, that you can promote and enable installation of your PWA.\n\nThis package reduces the pain of the development and gives you a wings to have your custom implementation to display promotion with a simple steps.\n\n## Pre-Requisites\nMake sure that your PWA is installable and Proper configured Manifest file\n\n## Installation\n    npm i --save react-pwa-installer-prompt\n\n## Importing\n```javascript\nimport PWAInstallerPrompt from 'react-pwa-installer-prompt';\n``` \n## Usage\n```javascript\nconst App = () => {\n  return (\n    <PWAInstallerPrompt \n      render={({ onClick }) => (\n        <button type=\"button\" onClick={onClick}> // make sure you pass onClick\n          Install\n        </button>\n      )}\n      callback={(data) => console.log(data)} \n    />\n  );\n}\nexport default App;\n```\n\n## Demo\nVisit here for the [demo](https://bit.ly/33QBYj9). (Shows `+` icon in the omnibox).\n\nFor the good experience open-up in mobile https://naveenh.xyz. (Install option will be popped in the footer).\n\n## Props\n|Props| Type |Description|\n|--|--|--|\n| render | function  | Your custom component as a function to show in-app promo. It is mandatory to pass onClick in the button or any element where click event triggers| \n|callback|object|Package has identified the events which are being triggers during installation process, When ever an event changes the callback gives you the installation status. |\n\n\n#### Ex: You can have a custom component for in-app promo\n```javascript\nimport React from 'react';\nimport { Row, Col, Button } from 'antd';\nimport PWAInstallerPrompt from 'react-pwa-installer-prompt';\n\nconst Install = () => {       \n  return (  \n    <PWAInstallerPrompt \n      render={({ onClick }) => (\n        <Row align=\"middle\" justify=\"center\">\n          <Col span={16}>\n              Keep App, For Offline & Quick Access!\n          </Col>\n          <Col span={6}>\n            <Button type=\"dashed\" onClick={onClick}>\n              Install\n            </Button>\n          </Col>\n        </Row>\n      )}\n      callback={(data) => console.log(data)} \n    />\n  )\n}\nexport default Install;\n```\nCallback properties:\n```javascript\n{\n   isInstallAllowed: true, // true, if app in not installed and when user has cancelled the request\n   isInstallWatingConfirm: false, // true, if user has clicked on install and not confirmed \n   isInstalling: false, // true, if being installed\n   isInstallCancelled: false, // true, if user has cancelled \n   isInstallSuccess: false, // true, if install success\n   isInstallFailed: false // true, if installation is failed\n}\n```\n\n#### Use Full Links\n - [ ] [Add a web app manifest](https://web.dev/add-manifest)\n - [ ] [Pattern for promoting](https://web.dev/promote-install/)\n\n## License\n[MIT](https://github.com/shnaveen25/react-pwa-installer-prompt/blob/main/LICENSE) © [Naveen Heroorkar](https://bit.ly/33QBYj9)","readmeFilename":"README.md"}