9 | 10 | A boolean that indicates if the exit intent was triggered. 11 | 12 |
13 | 14 | ## Example 15 | 16 | ```tsx 17 | const { isTriggered } = useExitIntent() 18 | ``` 19 | -------------------------------------------------------------------------------- /apps/web/src/components/FixedHeader/index.tsx: -------------------------------------------------------------------------------- 1 | import { HeaderContent, HeaderContainer } from './styles' 2 | 3 | export function FixedHeader({ children }: { children: React.ReactNode }) { 4 | return ( 5 |
9 | 10 | A boolean that indicates if the exit intent will be triggered. 11 | 12 |
13 | 14 | ## Example 15 | 16 | ```tsx 17 | const { willBeTriggered } = useExitIntent() 18 | ``` 19 | -------------------------------------------------------------------------------- /apps/web/src/components/Docs/LinkTree/Link/index.tsx: -------------------------------------------------------------------------------- 1 | import NextLink from 'next/link' 2 | 3 | import { Button, ButtonProps } from './styles' 4 | 5 | export function Link({ href, ...restOfProps }: ButtonProps) { 6 | return ( 7 |
9 | 10 | A boolean that indicates if the user was unsubscribed from the exit intent. 11 | 12 |
13 | 14 | ## Example 15 | 16 | ```tsx 17 | const { isUnsubscribed } = useExitIntent() 18 | ``` 19 | -------------------------------------------------------------------------------- /apps/web/src/components/Layout/Box/index.ts: -------------------------------------------------------------------------------- 1 | import { styled, Mixin } from 'styles' 2 | 3 | export const BoxStyles: Mixin = { 4 | display: 'flex', 5 | background: '$shape-primary', 6 | border: '1px solid $border-primary', 7 | boxShadow: '0 2px 2px 1px $colors$shadow-primary', 8 | borderRadius: 15, 9 | } 10 | 11 | export const Box = styled('div', BoxStyles) 12 | -------------------------------------------------------------------------------- /apps/web/src/components/Layout/OuterClickArea/index.ts: -------------------------------------------------------------------------------- 1 | import { styled, animations } from 'styles' 2 | 3 | export const OuterClickArea = styled('div', { 4 | position: 'fixed', 5 | top: 0, 6 | left: 0, 7 | width: '100%', 8 | height: '100%', 9 | zIndex: 998, 10 | background: '$shadow-primary', 11 | animation: `${animations.fadeIn} 0.2s ease`, 12 | }) 13 | -------------------------------------------------------------------------------- /apps/web/src/components/Layout/RootContainer/index.ts: -------------------------------------------------------------------------------- 1 | import { styled } from 'styles' 2 | 3 | export const RootContainer = styled('main', { 4 | display: 'flex', 5 | flexDirection: 'column', 6 | justifyContent: 'center', 7 | alignItems: 'stretch', 8 | minWidth: '100vw', 9 | minHeight: '100vh', 10 | gap: '1.5rem', 11 | backgroundSize: 'cover', 12 | }) 13 | -------------------------------------------------------------------------------- /apps/web/docs/API/methods/reset-settings.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: resetSettings 3 | --- 4 | 5 | # resetSettings 6 | 7 | A function that resets the exit intent settings to the default ones. 8 | 9 |
10 | 11 | ## Example 12 | 13 | ```tsx 14 | const { resetSettings } = useExitIntent() 15 | 16 | function handleResetSettings() { 17 | resetSettings() 18 | } 19 | ``` 20 | -------------------------------------------------------------------------------- /apps/web/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './InstallationBox' 2 | export * from './LibraryVersion' 3 | export * from './ExternalLink' 4 | export * from './FixedHeader' 5 | export * from './Modals' 6 | export * from './Layout' 7 | export * from './Header' 8 | export * from './Footer' 9 | export * from './Icons' 10 | export * from './Docs' 11 | export * from './Head' 12 | -------------------------------------------------------------------------------- /apps/web/src/shared/constants/library.ts: -------------------------------------------------------------------------------- 1 | import packageJSON from '../../../../../packages/use-exit-intent/package.json' 2 | 3 | const { name, version, description, repository, license, author } = packageJSON 4 | 5 | export const library = { 6 | name, 7 | author, 8 | version, 9 | license, 10 | description, 11 | url: repository.url.replace('.git', ''), 12 | } as const 13 | -------------------------------------------------------------------------------- /apps/web/src/shared/utils/createDebounce.ts: -------------------------------------------------------------------------------- 1 | export function createDebounce(fn: Function, delay = 200) { 2 | let timer: ReturnType
10 | 11 | ## Example 12 | 13 | ```tsx 14 | const { resetState } = useExitIntent() 15 | 16 | function handleReset() { 17 | resetState() 18 | } 19 | ``` 20 | -------------------------------------------------------------------------------- /packages/use-exit-intent/src/utils/factories/debounce.ts: -------------------------------------------------------------------------------- 1 | export function createDebounce(fn: Function, delay = 200) { 2 | let timer: ReturnType
9 | 10 | > Please, check the [playground](/#playground) section to see all the available settings. 11 | 12 |
13 | 14 | An object with the current settings of the exit intent 15 | 16 |
17 | 18 | ## Example 19 | 20 | ```tsx 21 | const { settings } = useExitIntent() 22 | ``` 23 | -------------------------------------------------------------------------------- /apps/web/src/modules/server/docs/getMetaFile.ts: -------------------------------------------------------------------------------- 1 | import { readFile } from 'node:fs/promises' 2 | import { resolve } from 'node:path' 3 | 4 | import { getDocsFolder } from './getDocsFolder' 5 | 6 | export async function getMetaFile() { 7 | const metaFilePath = resolve(getDocsFolder(), 'meta.json') 8 | const metaFileContent = await readFile(metaFilePath, 'utf8').catch(() => '{}') 9 | 10 | return JSON.parse(metaFileContent) 11 | } 12 | -------------------------------------------------------------------------------- /apps/web/src/shared/utils/getType.ts: -------------------------------------------------------------------------------- 1 | type ReturnTypes = 2 | | 'object' 3 | | 'array' 4 | | 'date' 5 | | 'function' 6 | | 'string' 7 | | 'number' 8 | | 'blob' 9 | | 'promise' 10 | | 'function' 11 | | 'boolean' 12 | | 'regexp' 13 | | 'undefined' 14 | | 'null' 15 | 16 | export function getType(it: unknown) { 17 | return Object.prototype.toString 18 | .call(it) 19 | .replace(/[\[\]]|object +/g, '') 20 | .toLowerCase() as ReturnTypes 21 | } 22 | -------------------------------------------------------------------------------- /apps/web/src/components/Layout/Description/index.ts: -------------------------------------------------------------------------------- 1 | import { styled } from 'styles' 2 | import { BoxStyles } from '../Box' 3 | 4 | export const Description = styled('p', { 5 | color: '$text-support', 6 | textAlign: 'center', 7 | 8 | '> code': { 9 | ...BoxStyles, 10 | 11 | width: 'fit-content', 12 | padding: '0.3rem', 13 | borderRadius: 4, 14 | backgroundColor: '$border-primary', 15 | }, 16 | 17 | '@bp4': { 18 | textAlign: 'left', 19 | }, 20 | }) 21 | -------------------------------------------------------------------------------- /apps/web/docs/API/methods/unsubscribe.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: unsubscribe 3 | order: 2 4 | --- 5 | 6 | # unsubscribe 7 | 8 | A function that unsubscribes the user from the exit intent. The verification 9 | persistance use cookies to avoid the user from seeing the exit intent again 10 | until the cookie expires. 11 | 12 |
13 | 14 | ## Example 15 | 16 | ```tsx 17 | const { unsubscribe } = useExitIntent() 18 | 19 | function handleUnsubscription() { 20 | unsubscribe() 21 | } 22 | ``` 23 | -------------------------------------------------------------------------------- /apps/web/docs/API/methods/update-settings.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: updateSettings 3 | --- 4 | 5 | # updateSettings 6 | 7 | A function that updates the exit intent settings. 8 | 9 | ## Params 10 | - **settings:** Object **(required)** 11 | 12 |
13 | 14 | ## Example 15 | ```tsx 16 | const { updateSettings } = useExitIntent() 17 | 18 | function handleUpdateSettings() { 19 | updateSettings({ 20 | cookie: { 21 | key: 'exit-intent', 22 | daysToExpire: 30 23 | } 24 | }) 25 | } 26 | ``` 27 | 28 | 29 | -------------------------------------------------------------------------------- /apps/web/next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | 5 | experimental: { 6 | transpilePackages: ['use-exit-intent'], 7 | }, 8 | 9 | pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'], 10 | 11 | redirects() { 12 | return [ 13 | { 14 | source: '/docs', 15 | destination: '/docs/getting-started/overview', 16 | permanent: false, 17 | }, 18 | ] 19 | }, 20 | } 21 | 22 | export default nextConfig 23 | -------------------------------------------------------------------------------- /.changeset/README.md: -------------------------------------------------------------------------------- 1 | # Changesets 2 | 3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works 4 | with multi-package repos, or single-package repos to help you version and publish your code. You can 5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets) 6 | 7 | We have a quick list of common questions to get you started engaging with this project in 8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules/ 5 | .pnp 6 | .pnp.js 7 | 8 | # testing 9 | coverage 10 | 11 | # next.js 12 | .next/ 13 | out/ 14 | build 15 | dist 16 | 17 | # misc 18 | .DS_Store 19 | *.pem 20 | 21 | # debug 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | .pnpm-debug.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # turbo 34 | .turbo 35 | -------------------------------------------------------------------------------- /apps/web/src/templates/Home/index.tsx: -------------------------------------------------------------------------------- 1 | import { Head, Header, Layout, LayoutSpacing } from 'components' 2 | import { PlaygroundSection } from './Playground' 3 | import { OverviewSection } from './Overview' 4 | import { meta } from 'shared/constants' 5 | 6 | export function HomeTemplate() { 7 | return ( 8 |
10 | 11 | - **key** - the name of the cookie 12 | - **daysToExpire** - the number of days until the cookie expires 13 | 14 |
15 | 16 | ## Default 17 | ```tsx 18 | key: 'exit-intent' 19 | daysToExpire: 30 20 | ``` 21 | 22 |
23 | 24 | ## Example 25 | ```tsx 26 | useExitIntent({ 27 | cookie: { 28 | key: 'exit-intent', 29 | daysToExpire: 30 30 | } 31 | }) 32 | ``` 33 | 34 | 35 | -------------------------------------------------------------------------------- /apps/web/src/shared/constants/meta.ts: -------------------------------------------------------------------------------- 1 | import { getPublicPath } from 'shared/utils' 2 | import { library } from './library' 3 | 4 | export const meta = { 5 | title: `useExitIntent - ${library.description}`, 6 | description: `The Exit Intent strategy is a great way to increase your conversion rate. That strategy is commonly used to show a modal/popup when the user is about to leave your website.`, 7 | 8 | twitter: { 9 | site: `@daltonmenezes`, 10 | }, 11 | 12 | image: { 13 | url: getPublicPath(`/social.png`), 14 | width: '1200', 15 | height: '630', 16 | }, 17 | } 18 | -------------------------------------------------------------------------------- /apps/web/src/shared/utils/toObjectTree.ts: -------------------------------------------------------------------------------- 1 | export function toObjectTree(array: string[][]) { 2 | function createObjectTree(array: string[][], state = {}): Object { 3 | return array.reduce((acc, current) => { 4 | const [key, ...children] = current 5 | const nextState = acc[key as keyof typeof acc] 6 | const hasChildren = children.length > 0 7 | 8 | return { 9 | ...acc, 10 | 11 | [key]: hasChildren ? createObjectTree([children], nextState) : null, 12 | } 13 | }, state) 14 | } 15 | 16 | return (() => createObjectTree(array))() 17 | } 18 | -------------------------------------------------------------------------------- /apps/web/src/hooks/useDisclosure.ts: -------------------------------------------------------------------------------- 1 | import { useCallback, useState } from 'react' 2 | 3 | export function useDisclosure(isOpenDefault = false) { 4 | const [isOpen, setIsOpen] = useState(isOpenDefault) 5 | 6 | const open = useCallback(() => setIsOpen(true), []) 7 | const close = useCallback(() => setIsOpen(false), []) 8 | 9 | const toggle = useCallback((toSet?: boolean) => { 10 | if (typeof toSet === 'undefined') { 11 | setIsOpen((state) => !state) 12 | } else { 13 | setIsOpen(toSet) 14 | } 15 | }, []) 16 | 17 | return { isOpen, open, close, toggle } 18 | } 19 | -------------------------------------------------------------------------------- /apps/web/src/components/Layout/Title/index.ts: -------------------------------------------------------------------------------- 1 | import { styled, animations } from 'styles' 2 | 3 | export const Title = styled('h1', { 4 | fontSize: '2.5rem', 5 | letterSpacing: 2, 6 | fontWeight: 700, 7 | color: '$text-title', 8 | animation: `${animations.reveal} 0.6s ease-in-out`, 9 | backgroundImage: '$text-gradient', 10 | backgroundClip: 'text', 11 | '-webkit-background-clip': 'text', 12 | textFillColor: 'transparent', 13 | '-webkit-text-fill-color': 'transparent', 14 | 15 | userSelect: 'none', 16 | 17 | '@bp4': { 18 | fontSize: '4rem', 19 | letterSpacing: 5, 20 | }, 21 | }) 22 | -------------------------------------------------------------------------------- /apps/web/src/components/Layout/Background/index.ts: -------------------------------------------------------------------------------- 1 | import { getPublicPath } from 'shared/utils' 2 | import { styled } from 'styles' 3 | 4 | export const Background = styled('div', { 5 | top: 0, 6 | left: 0, 7 | width: '100%', 8 | height: '100%', 9 | backgroundImage: `url("${getPublicPath('/background.svg')}")`, 10 | backgroundRepeat: 'no-repeat', 11 | backgroundSize: '300%', 12 | backgroundPosition: 'top center', 13 | zIndex: -1, 14 | position: 'fixed', 15 | overflowX: 'hidden', 16 | 17 | '@bp4': { 18 | backgroundSize: 'cover', 19 | backgroundPosition: 'center center', 20 | }, 21 | }) 22 | -------------------------------------------------------------------------------- /apps/web/docs/getting-started/overview.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Overview 3 | order: 1 4 | --- 5 | 6 | # Overview 7 | 8 | The Exit Intent strategy is a great way to increase your conversion rate. That strategy is commonly used to show a modal/popup when the user is about to leave your website. 9 | 10 |
11 | 12 | useExitIntent hook is simple to use and you can customize it to your needs. Here are the main features: 13 | 14 |
15 | 16 | - 🚀 Multiple handlers can be registred 17 | - 🔥 Highly configurable 18 | - 🧠 Different strategies for Desktop and Mobile 19 | - ⛔️ Unsubscription support with cookies 20 | - 🎉 Built with TypeScript 21 | -------------------------------------------------------------------------------- /apps/web/src/modules/server/docs/getParsedDocPaths.ts: -------------------------------------------------------------------------------- 1 | import { parse } from 'node:path' 2 | 3 | import { getAllMDXFilePaths } from './getAllMDXFilePaths' 4 | import { getDocsFolder } from './getDocsFolder' 5 | 6 | export async function getParsedDocPaths() { 7 | const docsFolder = getDocsFolder() 8 | const filePaths = await getAllMDXFilePaths(docsFolder) 9 | 10 | const parsedDocPaths = filePaths.map((file) => ({ 11 | path: file.replace(docsFolder, ''), 12 | fullPath: file, 13 | url: file.replace(`${docsFolder}/`, '').replace(/.mdx$/, ''), 14 | slug: parse(file).name, 15 | })) 16 | 17 | return parsedDocPaths 18 | } 19 | -------------------------------------------------------------------------------- /apps/web/docs/settings/mobile.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: mobile 3 | --- 4 | 5 | # mobile 6 | 7 | **mobile** is an object with the following properties: 8 | 9 |
10 | 11 | - **delayInSecondsToTrigger** - delay in seconds to trigger the exit intent handlers 12 | - **triggerOnIdle** - if true, the exit intent handlers will be triggered when the user is idle 13 | 14 |
15 | 16 | ## Default 17 | ```tsx 18 | delayInSecondsToTrigger: 10 19 | triggerOnIdle: true 20 | ``` 21 | 22 |
23 | 24 | ## Example 25 | ```tsx 26 | useExitIntent({ 27 | mobile: { 28 | delayInSecondsToTrigger: 10, 29 | triggerOnIdle: true 30 | } 31 | }) 32 | ``` 33 | 34 | 35 | -------------------------------------------------------------------------------- /packages/eslint-config/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | es2020: true, 4 | node: true, 5 | }, 6 | extends: ['prettier', 'plugin:prettier/recommended'], 7 | parser: '@typescript-eslint/parser', 8 | parserOptions: { 9 | ecmaVersion: 2020, 10 | sourceType: 'module', 11 | }, 12 | plugins: ['@typescript-eslint', 'prettier'], 13 | rules: { 14 | '@typescript-eslint/no-empty-interface': 0, 15 | 'prettier/prettier': [ 16 | 'error', 17 | { 18 | semi: false, 19 | singleQuote: true, 20 | tabWidth: 2, 21 | useTabs: false, 22 | trailingComma: 'es5', 23 | }, 24 | ], 25 | }, 26 | } 27 | -------------------------------------------------------------------------------- /packages/use-exit-intent/src/utils/processHandlersByDeviceContext.ts: -------------------------------------------------------------------------------- 1 | import { ExitIntentHandler } from '../types' 2 | import { isDesktop, isMobile } from './is' 3 | 4 | export function processHandlersByDeviceContext(handler: ExitIntentHandler) { 5 | const hasDesktopEvent = handler.context?.includes('onDesktop') 6 | const hasMobileEvent = handler.context?.includes('onMobile') 7 | const isDefault = !hasDesktopEvent && !hasMobileEvent 8 | 9 | if (isDefault) { 10 | handler.handler() 11 | } 12 | 13 | if (hasDesktopEvent && isDesktop()) { 14 | handler.handler() 15 | } 16 | 17 | if (hasMobileEvent && isMobile()) { 18 | handler.handler() 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /apps/web/src/components/Icons/Menu.tsx: -------------------------------------------------------------------------------- 1 | export function Menu() { 2 | return ( 3 | 25 | ) 26 | } 27 | -------------------------------------------------------------------------------- /apps/web/src/modules/server/docs/getAllDocs.ts: -------------------------------------------------------------------------------- 1 | import { readFile } from 'node:fs/promises' 2 | import matter from 'gray-matter' 3 | 4 | import { getParsedDocPaths } from './getParsedDocPaths' 5 | 6 | export async function getAllDocs() { 7 | const paths = await getParsedDocPaths() 8 | 9 | const docs = await Promise.all( 10 | paths.map(async (path) => { 11 | const fileContent = await readFile(path.fullPath, 'utf8') 12 | const { data } = matter(fileContent) 13 | 14 | return { 15 | ...data, 16 | url: path.url, 17 | slug: path.slug, 18 | order: data.order || 0, 19 | title: data.title || path.slug, 20 | } 21 | }) 22 | ) 23 | 24 | return docs 25 | } 26 | -------------------------------------------------------------------------------- /apps/web/src/components/Icons/Clipboard.tsx: -------------------------------------------------------------------------------- 1 | export function ClipboardIcon() { 2 | return ( 3 | 22 | ) 23 | } 24 | -------------------------------------------------------------------------------- /apps/web/src/shared/types/index.ts: -------------------------------------------------------------------------------- 1 | export interface Doc { 2 | title: string 3 | slug: string 4 | source: any 5 | url: string 6 | } 7 | 8 | export interface Link { 9 | title: string 10 | url: string 11 | order: number 12 | } 13 | 14 | export type LinkKeys = keyof Link 15 | 16 | export interface Links { 17 | [key: string]: Link[] 18 | } 19 | 20 | export interface PaginatedLink extends Link { 21 | sections: { 22 | raw: string[] 23 | sanitized: string[] 24 | } 25 | } 26 | 27 | export interface Pagination { 28 | previous: PaginatedLink 29 | next: PaginatedLink 30 | hasPrevious: boolean 31 | hasNext: boolean 32 | } 33 | 34 | export interface DocProps { 35 | doc: Doc 36 | links: Links 37 | pagination: Pagination 38 | } 39 | -------------------------------------------------------------------------------- /apps/web/docs/getting-started/installation.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Installation 3 | order: 2 4 | --- 5 | 6 | # Installation 7 | 8 | ### npm 9 | ```bash 10 | npm i use-exit-intent 11 | ``` 12 | 13 | ### pnpm 14 | ```bash 15 | pnpm i use-exit-intent 16 | ``` 17 | 18 | ### yarn 19 | ```bash 20 | yarn add use-exit-intent 21 | ``` 22 | 23 |
24 | 25 | ## Importing 26 | ```tsx 27 | import { useExitIntent } from 'use-exit-intent' 28 | ``` 29 | 30 | ## Using 31 | 32 | In your React component: 33 | 34 |
35 | 36 | ```tsx 37 | export function App() { 38 | const { registerHandler } = useExitIntent() 39 | 40 | registerHandler({ 41 | id: 'openModal', 42 | handler: () => console.log('Hello from handler!') 43 | }) 44 | 45 | // ... 46 | } 47 | ``` 48 | -------------------------------------------------------------------------------- /packages/use-exit-intent/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # use-exit-intent 2 | 3 | ## 1.1.0 4 | 5 | ### Minor Changes 6 | 7 | - add mouseLeaveDelayInSeconds 8 | 9 | ## 1.0.7 10 | 11 | ### Patch Changes 12 | 13 | - fix an issue where provided cookie settings were not being applied 14 | 15 | ## 1.0.6 16 | 17 | ### Patch Changes 18 | 19 | - fix an issue where hook was not trigerred on firefox and safari 20 | 21 | ## 1.0.5 22 | 23 | ### Patch Changes 24 | 25 | - docs: add usage example 26 | 27 | ## 1.0.4 28 | 29 | ### Patch Changes 30 | 31 | - fix readme 32 | 33 | ## 1.0.3 34 | 35 | ### Patch Changes 36 | 37 | - fix readme 38 | 39 | ## 1.0.2 40 | 41 | ### Patch Changes 42 | 43 | - fix readme 44 | 45 | ## 1.0.1 46 | 47 | ### Patch Changes 48 | 49 | - 9427f34: add readme 50 | -------------------------------------------------------------------------------- /packages/ts-config/base.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "compilerOptions": { 4 | "incremental": true, 5 | "strict": true, 6 | "target": "esnext", 7 | "lib": [ 8 | "esnext", 9 | "dom", 10 | "dom.iterable" 11 | ], 12 | "jsx": "react-jsx", 13 | "importHelpers": true, 14 | "moduleResolution": "node", 15 | "resolveJsonModule": true, 16 | "esModuleInterop": true, 17 | "sourceMap": true, 18 | "isolatedModules": true, 19 | "allowJs": true, 20 | "allowSyntheticDefaultImports": true, 21 | "skipLibCheck": true, 22 | "forceConsistentCasingInFileNames": true, 23 | "outDir": "dist", 24 | "baseUrl": "." 25 | }, 26 | "exclude": [ 27 | "node_modules" 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /packages/use-exit-intent/src/utils/constants.ts: -------------------------------------------------------------------------------- 1 | import { Context, InternalExitIntentSettings } from '../types' 2 | 3 | export const contexts: { [key in Exclude
-
17 | {sectionName}
18 |
19 |
- {render(children)} 21 |
-
20 |
-
28 | {sectionName}
29 |
{renderLinks && renderLinks(section)}
30 |
26 | Created by
27 |
28 | {library.author.name}
29 |
30 | 💜
31 |
32 | 10 | 11 | - **triggerOnIdle** - if true, the handlers will be triggered when the user is idle 12 | - **triggerOnMouseLeave** - if true, the handlers will be triggered when the user is about to leave your website 13 | - **delayInSecondsToTrigger** - delay in seconds to trigger the exit intent handlers on idle. **triggerOnIdle** **must be true**! 14 | - **mouseLeaveDelayInSeconds** - delay in seconds to trigger the exit intent handlers on mouse leave. **triggerOnMouseLeave** **must be true**! 15 | - **useBeforeUnload** - if true, the handlers will be triggered when the user is about to leave your website. **UI will be blocked until the user cancels the action**. 16 | 17 |
18 | 19 | ## Default 20 | ```tsx 21 | delayInSecondsToTrigger: 10 22 | mouseLeaveDelayInSeconds: 5 23 | triggerOnMouseLeave: true 24 | triggerOnIdle: false 25 | useBeforeUnload: false 26 | ``` 27 | 28 |
29 | 30 | ## Example 31 | ```tsx 32 | useExitIntent({ 33 | desktop: { 34 | delayInSecondsToTrigger: 10, 35 | mouseLeaveDelayInSeconds: 5, 36 | triggerOnMouseLeave: true, 37 | triggerOnIdle: false 38 | useBeforeUnload: false 39 | } 40 | }) 41 | ``` 42 | 43 | 44 | -------------------------------------------------------------------------------- /apps/web/src/components/Layout/index.ts: -------------------------------------------------------------------------------- 1 | import { styled } from 'styles' 2 | 3 | export * from './OuterClickArea' 4 | export * from './RootContainer' 5 | export * from './Description' 6 | export * from './Background' 7 | export * from './Separator' 8 | export * from './Button' 9 | export * from './Title' 10 | export * from './Box' 11 | 12 | export const BaseLayout = styled('div', { 13 | display: 'flex', 14 | flexFlow: 'column wrap', 15 | width: '100%', 16 | gap: '1rem', 17 | }) 18 | 19 | export const Layout = styled(BaseLayout, { 20 | alignItems: 'center', 21 | maxWidth: `1250px`, 22 | width: `100%`, 23 | padding: `0 20px`, 24 | margin: '0 auto', 25 | position: 'relative', 26 | }) 27 | 28 | export const LayoutSpacing = styled('div', { 29 | variants: { 30 | size: { 31 | extraSmall: { 32 | height: '0.5rem', 33 | }, 34 | 35 | small: { 36 | paddingBottom: '1rem', 37 | }, 38 | 39 | medium: { 40 | paddingBottom: '2rem', 41 | 42 | '@bp4': { 43 | paddingBottom: '4rem', 44 | }, 45 | }, 46 | 47 | large: { 48 | paddingBottom: '4rem', 49 | 50 | '@bp4': { 51 | paddingBottom: '8rem', 52 | }, 53 | }, 54 | }, 55 | }, 56 | 57 | defaultVariants: { 58 | size: 'large', 59 | }, 60 | }) 61 | -------------------------------------------------------------------------------- /apps/web/src/components/Icons/GitHub.tsx: -------------------------------------------------------------------------------- 1 | export function GitHubIcon() { 2 | return ( 3 | 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /apps/web/src/shared/constants/codes.ts: -------------------------------------------------------------------------------- 1 | export const codes = { 2 | overview: { 3 | default: ` 4 | import { useExitIntent } from 'use-exit-intent' 5 | 6 | export default function App() { 7 | const { unsubscribe, registerHandler } = useExitIntent() 8 | 9 | registerHandler({ 10 | id: 'openModal', 11 | handler: () => console.log('First handler') 12 | }) 13 | 14 | registerHandler({ 15 | id: 'anotherHandler', 16 | handler: () => console.log('Another handler'), 17 | context: ['onUnsubscribe', 'onMobile'] 18 | }) 19 | 20 | const handleUnsubscription = () => unsubscribe() 21 | 22 | // ... 23 | } 24 | `, 25 | 26 | config: ` 27 | export default function App() { 28 | const exitIntent = useExitIntent({ 29 | "cookie": { 30 | "daysToExpire": 30, 31 | "key": "exit-intent" 32 | }, 33 | 34 | "desktop": { 35 | "triggerOnIdle": false, 36 | "useBeforeUnload": false, 37 | "triggerOnMouseLeave": true, 38 | "delayInSecondsToTrigger": 10, 39 | "mouseLeaveDelayInSeconds": 5 40 | }, 41 | 42 | "mobile": { 43 | "triggerOnIdle": true, 44 | "delayInSecondsToTrigger": 10 45 | } 46 | }) 47 | // ... 48 | `, 49 | }, 50 | } as const 51 | -------------------------------------------------------------------------------- /apps/web/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "web", 3 | "version": "1.0.0", 4 | "private": true, 5 | "docsFolder": "docs", 6 | "license": "MIT", 7 | "scripts": { 8 | "dev": "next dev", 9 | "build": "next build && next export", 10 | "start": "next start", 11 | "lint": "next lint", 12 | "clean": "rm -rf .turbo && rm -rf node_modules" 13 | }, 14 | "dependencies": { 15 | "@mdx-js/loader": "^2.1.5", 16 | "@mdx-js/react": "^2.1.5", 17 | "@next/mdx": "^12.3.1", 18 | "@radix-ui/react-dialog": "^1.0.0", 19 | "@stitches/react": "^1.2.8", 20 | "framer-motion": "^7.6.4", 21 | "gray-matter": "^4.0.3", 22 | "next": "12.3.2", 23 | "next-mdx-remote": "^4.1.0", 24 | "react": "18.2.0", 25 | "react-dom": "18.2.0", 26 | "react-syntax-highlighter": "^15.5.0", 27 | "rehype-autolink-headings": "^6.1.1", 28 | "rehype-slug": "^5.0.1", 29 | "remark-frontmatter": "^4.0.1", 30 | "remark-gfm": "^3.0.1", 31 | "turbo": "1.5.6", 32 | "use-exit-intent": "*" 33 | }, 34 | "devDependencies": { 35 | "@babel/core": "^7.0.0", 36 | "@daltonmenezes/eslint-config": "*", 37 | "@daltonmenezes/ts-config": "*", 38 | "@types/node": "^17.0.12", 39 | "@types/react": "18.0.17", 40 | "@types/react-syntax-highlighter": "^15.5.5", 41 | "next-transpile-modules": "9.0.0", 42 | "typescript": "^4.5.3" 43 | }, 44 | "eslintIgnore": [ 45 | ".next", 46 | "out" 47 | ] 48 | } 49 | -------------------------------------------------------------------------------- /apps/web/src/styles/keyframes.ts: -------------------------------------------------------------------------------- 1 | import { keyframes as Keyframes } from '.' 2 | 3 | export const createKeyframes = (keyframes: typeof Keyframes) => ({ 4 | fadeIn: keyframes({ 5 | from: { 6 | opacity: 0, 7 | }, 8 | 9 | to: { 10 | opacity: 1, 11 | }, 12 | }), 13 | 14 | background: keyframes({ 15 | '0%': { 16 | opacity: 0, 17 | backgroundSize: '50%', 18 | backgroundPosition: 'top center', 19 | }, 20 | 21 | '10%': { 22 | opacity: 1, 23 | }, 24 | 25 | '50%': { 26 | backgroundSize: '300%', 27 | }, 28 | 29 | '100%': { 30 | backgroundSize: '100%', 31 | backgroundPosition: 'center center', 32 | }, 33 | }), 34 | 35 | backgroundCover: keyframes({ 36 | '0%': { 37 | opacity: 0, 38 | backgroundPosition: '50% 50%', 39 | }, 40 | 41 | '5%': { 42 | opacity: 1, 43 | }, 44 | 45 | '90%': { 46 | opacity: 1, 47 | }, 48 | 49 | '100%': { 50 | opacity: 0, 51 | backgroundPosition: '30% 30%', 52 | }, 53 | }), 54 | 55 | reveal: keyframes({ 56 | from: { 57 | opacity: 0, 58 | transform: 'translateY(1rem)', 59 | }, 60 | 61 | to: { 62 | opacity: 1, 63 | transform: 'translateY(0)', 64 | }, 65 | }), 66 | 67 | spin: keyframes({ 68 | from: { 69 | transform: 'rotate(0deg)', 70 | }, 71 | 72 | to: { 73 | transform: 'rotate(360deg)', 74 | }, 75 | }), 76 | }) 77 | -------------------------------------------------------------------------------- /apps/web/public/background.svg: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /apps/web/src/modules/server/docs/getDocPaginationNavigator.ts: -------------------------------------------------------------------------------- 1 | import { getDocLinks } from './getDocLinks' 2 | 3 | import type { Pagination } from 'shared/types' 4 | 5 | export async function getDocPaginationNavigator( 6 | currentDoc: string 7 | ): Promise
21 | 22 | By default, the handler will be triggered on desktop and mobile devices and 23 | you can omit the context parameter, but if you would like to specify the 24 | context where the handler should be triggered, you can pass an array of the 25 | following values as necessary: 26 | 27 |
28 | 29 | - **onTrigger** - triggers the handler when the exit intent is 30 | detected 31 | - **onUnsubscribe** - triggers the handler when the user 32 | unsubscribes from the exit intent 33 | - **onDesktop** - triggers the handler on desktop devices 34 | - **onMobile** - triggers the handler on mobile devices 35 | 36 |
37 | 38 | ## Example 39 | ```tsx 40 | const { registerHandler } = useExitIntent() 41 | 42 | // This handler will be triggered on desktop and mobile 43 | registerHandler({ 44 | id: 'myHandlerId', 45 | handler: () => { 46 | console.log('Exit intent triggered!') 47 | } 48 | }) 49 | 50 | // This handler will be triggered only on mobile 51 | registerHandler({ 52 | id: 'mySecondHandlerId', 53 | handler: () => { 54 | console.log('Hello from Mobile!') 55 | }, 56 | context: ['onMobile'] 57 | }) 58 | ``` 59 | 60 | 61 | -------------------------------------------------------------------------------- /apps/web/src/components/Modals/ExitIntent/index.tsx: -------------------------------------------------------------------------------- 1 | import * as RadixDialog from '@radix-ui/react-dialog' 2 | 3 | import { ExternalLink, Button } from 'components' 4 | import { getPublicPath } from 'shared/utils' 5 | import { library } from 'shared/constants' 6 | 7 | import { 8 | Tag, 9 | Image, 10 | Title, 11 | Overlay, 12 | Content, 13 | Container, 14 | CloseButton, 15 | ContentGroup, 16 | } from './styles' 17 | 18 | interface ModalProps { 19 | onDismiss: () => void 20 | unsubscribe: () => void 21 | } 22 | 23 | export function ExitIntentModal({ onDismiss, unsubscribe }: ModalProps) { 24 | return ( 25 |
-
27 | {Object.values(links).map((links) => {
28 | const sections = links.map(({ url }) => url.split('/').slice(0, -1))
29 |
30 | return (
31 |
-
32 | 33 |52 |
36 | links 37 | .filter(({ url }) => url.includes(section)) 38 | .map(({ title, url }) => { 39 | const URL = `/docs/${url}` 40 | 41 | return ( 42 | - 43 | 44 | {title} 45 | 46 |
47 | ) 48 | }) 49 | } 50 | /> 51 |
53 | )
54 | })}
55 |
58 |
63 |
64 |
65 |
66 |
67 |
68 | useExitIntent
69 |
70 |
71 |
72 |
73 |
84 |
2 |
3 | 
4 |
5 |
useExitIntent: 🐠 A React Hook to handle exit intent strategies
8 | 9 |
10 |
11 |
12 | 
21 |
22 |
23 |
24 | 
2 |
3 |
4 |
5 |
useExitIntent: 🐠 A React Hook to handle exit intent strategies
8 | 9 |
10 |
11 |
12 |
21 |
22 |
23 |
24 |