Skip to content

Commit 2e80eaf

Browse files
nickapnickap
committed
Refactor: Convert vue-exit-intent to a composable
1 parent 2d79671 commit 2e80eaf

24 files changed

+3753
-480
lines changed

‎.eslintrc.cjs

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,13 @@ module.exports = {
66
extends: [
77
'plugin:vue/vue3-essential',
88
'eslint:recommended',
9+
'@vue/eslint-config-typescript',
910
'@vue/eslint-config-prettier'
1011
],
1112
parserOptions: {
1213
ecmaVersion: 'latest'
14+
},
15+
globals: {
16+
__dirname: true
1317
}
1418
};

‎README.md

Lines changed: 73 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,80 @@
1-
# Exit Intent Modal Pop-up for VUE 3
2-
Vue 3 Modal Pop-up that shows up when a user is leaving, or another threshold reached.
3-
## A flexible Modal Pop-up not only for marketing purposes.
4-
1+
# Use Composition API to power your exit intent strategy.
2+
### A composable to show your content when a user is leaving, or another threshold reached.
53
[Demo](https://vue-exit-intent.netlify.app/)
64

75
This package created in favor of [this](https://dev.to/nickap/exit-intent-pop-up-how-to-publish-on-npm-vue-3-3bhm) guide.
86

97
# Usage
10-
You can use this package as a **global component**.
11-
### Add the package
8+
### Import the composable and show your modal according to the value of `isShowing`.
9+
## Add the package
1210
```
1311
npm i vue-exit-intent
1412
```
15-
### Add it to your vue app:
16-
```javascript
17-
import vueExitIntent from "vue-exit-intent";
18-
import 'vue-exit-intent/dist/style.css';
19-
20-
21-
const app = createApp(App);
22-
23-
app.use(vueExitIntent);
24-
```
25-
> See example main.js below:
26-
```javascript
27-
import { createApp } from "vue";
28-
import App from "./App.vue";
29-
import "./assets/main.css";
30-
31-
32-
import vueExitIntent from "vue-exit-intent";
33-
import 'vue-exit-intent/dist/style.css';
34-
35-
36-
const app = createApp(App);
37-
38-
app.use(vueExitIntent);
39-
40-
app.mount("#app");
41-
```
42-
43-
### Finally use the component like this
44-
```javascript
45-
<vue-exit-intent>Your Content Here</vue-exit-intent>
13+
## Use the component like this
14+
``` javascript
15+
<sript setup lang="ts">
16+
import { useVueExitIntent } from 'vue-exit-intent'
17+
18+
const options = {
19+
LSItemKey: 'local-storage-key',
20+
handleScrollBars: true
21+
}
22+
23+
const { isShowing, close } = useVueExitIntent(options);
24+
</script>
25+
```
26+
``` html
27+
<template>
28+
<yourModalPopUp v-if="isShowing" @close="close"></yourModalPopUp>
29+
</template>
4630
```
47-
Your content will get displayed via [Slots](https://vuejs.org/guide/components/slots.html).
48-
### Pass available props like this
31+
32+
## Available helpers
33+
If you use all available helpers your code would look like this:
4934
```javascript
50-
<vue-exit-intent
51-
:repeatAfterHours="360"
52-
:navigateBeforeShowSeconds="0"
53-
>
54-
</vue-exit-intent>
35+
const {
36+
isShowing,
37+
isAllowedToGetTriggered,
38+
isUnsubscribed,
39+
close,
40+
resetState,
41+
unsubscribe
42+
} = useVueExitIntent(options);
5543
```
56-
### Available props
57-
| Prop | Default Value | Type | Required |
44+
`isShowing`: a reactive boolean ref that tracks whether the exit intent popup is currently visible.
45+
`isAllowedToGetTriggered`: a reactive boolean ref that tracks whether the exit intent popup is allowed to trigger.
46+
`isUnsubscribed`: a reactive boolean ref that tracks whether the user has unsubscribed from the exit intent popup.
47+
`close`: a function that closes the exit intent popup and resets any related states (e.g. the isShowing ref).
48+
`resetState`: a function that resets all state related to the exit intent popup (e.g. isShowing, isAllowedToGetTriggered, isUnsubscribed).
49+
`unsubscribe`: a function that unsubscribes the user from the exit intent popup.
50+
## Options
51+
| Key | Default Value | Type | Required |
5852
| --- | --- | --- | --- |
59-
| **repeatAfterHours** | 24*7 *(7 days)* | Number | false |
60-
| **scrollPercentage** | 0 | Number | false |
61-
| **navigateBeforeShowSeconds** | 0 | Number | false |
62-
| **mouseOutEnabled** | true | Boolean | false |
63-
| **touchDeviceSensitivity** | 5 | Number | false |
64-
| **showByDefault** | false | Boolean | false |
65-
| **showCloseBtn** | true | Boolean | false |
66-
| **color** | '#555' | String | false |
67-
| **bgroundColor** | '#fefefe' | String | false |
68-
| **bdropColor** | 'rgba(0, 0, 0, 0.7)' | String | false |
53+
| **repeatAfterDays** | 7 | Number | false |
54+
| **scrollPercentageToTrigger** | 0 | Number | false |
55+
| **delaySecondsAndTrigger** | 0 | Number | false |
56+
| **triggerOnExitIntent** | true | Boolean | false |
57+
| **touchDeviceSensitivity** | 15 | Number | false |
58+
| **scrollDebounceMillis** | 300 | Number | false |
59+
| **triggerOnPageLoad** | false | Boolean | false |
60+
| **handleScrollBars** | false | Boolean | false |
6961
| **LSItemKey** | 'vue-exit-intent' | String | false |
7062

71-
### Props Description
72-
- **repeatAfterHours**
73-
After how many hours you want the popup to get triggered again.
63+
### Options Description
64+
- **repeatAfterDays**
65+
After how many days you want the popup to get triggered again.
7466
When a user gets the popup that exact timestamp is stored in localstorage and its taken into account next time the user will visit your page.
75-
Giving a zero, the popup will be shown only once! Until the localstrage of the user gets cleared.
67+
Giving a zero, the popup will be shown only once! Until the localstrage of the user gets cleared/resets.
7668
**Give 0 to disable.**
7769
**This one runs a CHECK before show.**
7870

79-
- **scrollPercentage**
80-
The percentage that the user has to scroll before the pop-up gets triggered.
71+
- **scrollPercentageToTrigger**
72+
A scroll percentage that if reached by the user, the pop-up will get triggered.
8173
**Give 0 to disable.**
8274
**This one TRIGGERS the popup.**
8375

84-
- **navigateBeforeShowSeconds**
85-
How many seconds the user has to navigate before the pop-up gets triggered.
76+
- **delaySecondsAndTrigger**
77+
Trigger the pop-up after a short delay in seconds, once the page has loaded.
8678
**Give 0 to disable.**
8779
**This one TRIGGERS the popup.**
8880

@@ -92,42 +84,32 @@ The larger the number you will give, the more sesitive will be the pop-up on tou
9284
**Give 0 to disable.**
9385
**This one TRIGGERS the popup on touch devices.**
9486

95-
- **mouseOutEnabled**
96-
If false. Mouse out event will not trigger the pop-up. The user would have to reach navigateBeforeShowSeconds or scrollPercentage to get the popup.
97-
Ir true, well.. you know, the pop-up is set to get showed on user exit-intent
87+
- **triggerOnExitIntent**
88+
If false. Mouse out event, and scroll-up-fast for touch devices, will not trigger the pop-up. The user would have to reach delaySecondsAndTrigger or scrollPercentageToTrigger to get the popup.
89+
If true, your modal pop-up is set to get triggered on user exit-intent.
9890
**This one TRIGGERS the popup.**
9991

100-
- **showByDefault**
101-
Show On Mount. When a user visit your page.
92+
- **scrollDebounceMillis**
93+
Time in milliseconds to debounce user's scrolling
10294

103-
- **showCloseBtn**
104-
Show a closing button "X" (top-right).
105-
*You might want to be a lil bit more aggresive asking attention.*
95+
- **triggerOnPageLoad**
96+
Show your modal pop-up immediately When a user visits your page.
10697

107-
- **color**
108-
"X" Button color.
109-
110-
- **bgroundColor**
111-
Background Color.
112-
113-
- **bdropColor**
114-
BackDrop Color.
98+
- **handleScrollBars**
99+
Composable will handle the value of: `document.body.style.overflowY`.
100+
Will be eather `auto` (when isShowing is `false`), or `hidden` (when isShowing is `true`)
115101

116102
- **LSItemKey**
117103
Key of Local Storage item.
118104
You can use a different key to show multiple pop-ups with different behaviour/content.
119105

120-
### Use it with defaults
121-
Please add your content in between the opening and closing tag.
122-
If you don't add your pop-up content, a fallback content will be shown.
123-
```
124-
<vue-exit-intent></vue-exit-intent>
125-
```
126-
127-
# Contribute
128-
Attach event listeners only if we are sure will show the popup (check localstorage on mount)?
129-
typescript
130-
tests
106+
## Contribute
107+
Feel free to contribute, message me for your idea.
108+
- Write tests.
109+
- Report a bug.
110+
- Share this project.
111+
- Give a star if you like it.
112+
- Documentation
131113

132114
## Project Setup
133115

‎env.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="vite/client" />

0 commit comments

Comments
 (0)