├── .github └── FUNDING.yml ├── .gitignore ├── .npmignore ├── .prettierignore ├── .prettierrc.js ├── LICENSE ├── README.md ├── assets └── please-dont-go.gif ├── package-lock.json ├── package.json ├── src └── index.js └── yarn.lock /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | custom: 2 | [ 3 | 'https://buymeacoffee.com/braydenw', 4 | 'https://www.paypal.com/paypalme/braydentw' 5 | ] 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | assets -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | arrowParens: 'always', 3 | singleQuote: true, 4 | tabWidth: 2, 5 | trailingComma: 'none' 6 | }; 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Brayden W 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # dontleaveme 😭 2 | 3 | _🙏 Beg users to stay on your website with one line of code._ 4 | 5 | DontLeaveMe - Keep users on your website with one line of code. | Product Hunt 6 | 7 | 8 | 9 | ## Usage 10 | 11 | The `dontLeaveMe.init()` function has **2 parameters**. 12 | 13 | ``` 14 | dontLeaveMe.init(awayTitle, defaultTitle) 15 | ``` 16 | 17 | `awayTitle`: What the `document.title` will be once the user temporarily leaves the page. 18 | 19 | `defaultTitle`: The `document.title` when the user is on the page. 20 | 21 | Here is the function in action: 22 | 23 | ``` 24 | dontLeaveMe.init("Don't leave me! 😭", "My Website") 25 | ``` 26 | 27 | ## Installation 28 | 29 | ### CDN 30 | 31 | A CDN script is _perfect_ for using **dontLeaveMe** in static, HTML websites. Simply insert this script into your document's `` tag: 32 | 33 | ```html 34 | 35 | ``` 36 | 37 | Once added, make sure to **initialize dontLeaveMe** on your page by adding this one line of JavaScript to your site: 38 | 39 | ``` 40 | dontLeaveMe.init("Don't leave me! 😭", "My Website") 41 | ``` 42 | 43 | ### Are you using React? 44 | 45 | Don't worry. I got you covered. 👍 46 | 47 | If you are building a node-based website, simply install the following package into your project using [NPM](https://www.npmjs.com/): 48 | 49 | ```sh 50 | npm i dontleaveme 51 | ``` 52 | 53 | Then import it into your React project. 54 | 55 | **Make sure you wrap the function with a `useEffect()` hook or else this will not work.** 56 | 57 | ```js 58 | import React, { useEffect } from ‘react’; 59 | import dontLeaveMe from 'dontleaveme'; 60 | 61 | useEffect(() => { 62 | dontLeaveMe.init("Don't leave me! 😭", "My Website") 63 | }) 64 | ``` 65 | 66 | --- 67 | 68 | ## Contributing to this project 👊 69 | 70 | Thanks for showing interest to contribute to **dontleaveme** 💖, you rock! 71 | 72 | Follow the directions below to setup your project and contribute to this repository. 73 | 74 | 1. Fork the repo (click the Fork button at the top right of [this page](https://github.com/BraydenTW/dontleaveme)) 75 | 76 | 2. Clone your fork locally 77 | 78 | ```sh 79 | git clone https://github.com//dontleaveme 80 | cd dontleaveme 81 | ``` 82 | 83 | 3. Setup all the dependencies and packages 84 | 85 | ```sh 86 | npm install 87 | ``` 88 | 89 | Once you submit a PR, I'll respond as soon as possible so we can take a look at what you've made! 90 | 91 | ## Making a Pull Request? 🔁 92 | 93 | That's **awesome**! Start by following the instructions given earlier of how to run this project on your system locally. 94 | 95 | Then, commit and push your changes: 96 | 97 | ```bash 98 | git add . 99 | git commit -m "My commit message" 100 | git push 101 | ``` 102 | 103 | Once finished, you can create a pull request! 104 | 105 | Is it your first time? Check out [this link](https://docs.github.com/en/free-pro-team@latest/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request-from-a-fork) to learn how to submit a pull request. 106 | 107 | ## Think you found a bug? 🐛 108 | 109 | Please [submit an issue](https://github.com/braydentw/dontleaveme/issues/new) and **provide a clear path to reproduction with a code example**. 110 | 111 | The clearer you are, the easier it will be for us help! 112 | 113 | ## License 114 | 115 | **dontleaveme** is open source software [licensed as MIT](https://github.com/braydentw/dontleaveme/blob/main/LICENSE). 116 | 117 | --- 118 | 119 | ### **Like my work?** 120 | 121 | I would appreciate it if you gave this repo a ✨ or if you Bought Me a Coffee 👇 122 | 123 | Buy Me A Coffee 124 | -------------------------------------------------------------------------------- /assets/please-dont-go.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BraydenTW/dontleaveme/965dedbeda7bcdc03f024610d7eb933a50081621/assets/please-dont-go.gif -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dlmtest", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dontleaveme", 3 | "description": "Beg users to stay on your website with one line of code.", 4 | "version": "1.0.0", 5 | "main": "src/index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "deploy": "npm publish" 9 | }, 10 | "repository": "git://github.com/braydentw/dontleaveme.git", 11 | "bugs": "https://github.com/braydentw/dontleaveme/issues", 12 | "keywords": [ 13 | "javascript", 14 | "js", 15 | "react", 16 | "reactjs", 17 | "nodejs", 18 | "title", 19 | "document" 20 | ], 21 | "author": "Brayden W ", 22 | "license": "MIT", 23 | "devDependencies": { 24 | "prettier": "2.2.1" 25 | } 26 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | const dontLeaveMe = { 2 | init: (awayTitle, defaultTitle) => { 3 | window.addEventListener("load", () => { 4 | document.title = defaultTitle; 5 | }); 6 | window.addEventListener("visibilitychange", () => { 7 | document.title = document.hidden ? awayTitle : defaultTitle; 8 | }); 9 | }, 10 | }; 11 | 12 | module.exports = dontLeaveMe; 13 | -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | prettier@2.2.1: 6 | version "2.2.1" 7 | resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5" 8 | integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q== 9 | --------------------------------------------------------------------------------