feat: delay till introduction bubble is shown can now be configured - fixes #118

Author: axe312ger

.changeset/silly-phones-vanish.md

@@ -0,0 +1,5 @@
+---
+'@consent-manager/interface-default': patch
+---
+
+You can now configure the delay till the introduction popup is shown

packages/interface-default/src/index.tsx

@@ -41,6 +41,7 @@ export interface ButtonProps {
 export interface ConsentManagerDefaultInterfaceDesignProps {
   useDefaultButtonForIntroduction?: boolean
   slideDuration?: number
+  noActionDelay?: number
   styles?: Styles
   animationStyles?: Styles
   ToggleButton?: React.ComponentType<ToggleButtonProps>

packages/interface-default/src/interface.tsx

@@ -46,6 +46,7 @@ export const Interface: React.FC<InterfaceProps> = ({
   initialValues,
   onSubmit,
   useDefaultButtonForIntroduction = true,
+  noActionDelay = 4000,
   slideDuration = 700,
   styles = defaultStyles,
   CloseIcon = IoClose,
@@ -139,6 +140,7 @@ export const Interface: React.FC<InterfaceProps> = ({
           slideDuration={slideDuration}
           CloseIcon={CloseIcon}
           Button={useDefaultButtonForIntroduction ? DefaultButton : Button}
+          noActionDelay={noActionDelay}
         />
       )}
       <Backdrop fadeDuration={slideDuration} styles={styles} />

packages/interface-default/src/introduction.tsx

@@ -1,4 +1,10 @@
-import React, { MouseEvent, useCallback, useContext, useEffect, useState } from 'react'
+import React, {
+  MouseEvent,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
 import clsx from 'clsx'
 import { CSSTransition } from 'react-transition-group'
 import createActivityDetector from 'activity-detector-ssr'
@@ -45,6 +51,10 @@ export const Introduction: React.FC<IntroductionProps> = ({
 
   // Listen for user interaction
   React.useEffect(() => {
+    if (noActionDelay === 0) {
+      setIsIdle(true)
+      return
+    }
     const activityDetector: ActivityDetector = createActivityDetector({
       timeToIdle: noActionDelay,
       inactivityEvents: [],