Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/evargast/browsernavigationwarning
https://github.com/evargast/browsernavigationwarning
Last synced: 23 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/evargast/browsernavigationwarning
- Owner: evargast
- License: mit
- Created: 2020-09-23T18:58:05.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T14:45:43.000Z (almost 2 years ago)
- Last Synced: 2024-04-27T01:43:09.104Z (8 months ago)
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/browser-navigation-warning
- Size: 883 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Browser Navigation Warning
_Helpful utility function that will trigger the browsers default pop-up before navigating away._
![Reload warning screenshot][reload]
![Leave warning screenshot][leave]
## Installation
```javascript
npm install -D browser-navigation-warning
```
## Usage
This function takes in one parameter, `trigger` (boolean) - this sets whether the navigation warning should be enabled/disabled.
> `trigger = true` will not trigger the alert immediately.
> It **enables** the alert which will only be triggered when the user tries to use a browser action such as _refresh_, _previous page_ or _next page_.
### Static - always enabled
To have the warning ready in all your pages, add the line below in your root file of your application (Usually `App`).
Otherwise, add the line below to the specific pages / components you want.
```javascript
import triggerBrowserWarning from 'browser-navigation-warning';
triggerBrowserWarning(true);
```
### Dynamic - conditionally enabled
Add the snippet below to your target page / component. `trigger` is your dynamic boolean conditional that decides whether the warning should be displayed or not.
React example:
```javascript
import triggerBrowserWarning from 'browser-navigation-warning';
useEffect(() => {
triggerBrowserWarning(trigger);
}, [trigger]);
```
[> More info on useEffect here <](https://reactjs.org/docs/hooks-effect.html)
## FAQ:
##
**Q:** Can I have my own custom dialog or custom text?
**A:** Nope, unfortunately browsers stopped supporting custom alert messages for navigation
**Q:** I've got an idea to improve this function, how can I get it to you?
**A:** Awesome! Check the contributing section below!😄
## Contributing
[PRs](https://github.com/evargast/browserNavigationWarning/pulls) are welcome!
[Issues](https://github.com/evargast/browserNavigationWarning/issues) are also welcome!
[reload]: https://raw.githubusercontent.com/evargast/browserNavigationWarning/master/readme-assets/reload.png
[leave]: https://raw.githubusercontent.com/evargast/browserNavigationWarning/master/readme-assets/leave.png