Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-guideme

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-guideme - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

2

dist/index.js

@@ -1,1 +0,1 @@

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.Guideme=t(require("react")):e.Guideme=t(e.react)}(self,(e=>(()=>{"use strict";var t={156:t=>{t.exports=e}},r={};function n(e){var o=r[e];if(void 0!==o)return o.exports;var i=r[e]={exports:{}};return t[e](i,i.exports,n),i.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};return(()=>{n.r(o),n.d(o,{GuideMe:()=>a});var e=n(156),t=n.n(e);function r(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,i,l,a=[],c=!0,u=!1;try{if(i=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;c=!1}else for(;!(c=(n=i.call(r)).done)&&(a.push(n.value),a.length!==t);c=!0);}catch(e){u=!0,o=e}finally{try{if(!c&&null!=r.return&&(l=r.return(),Object(l)!==l))return}finally{if(u)throw o}}return a}}(e,t)||function(e,t){if(e){if("string"==typeof e)return i(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?i(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var l=function(e){var r=(e.currentStep+1)/e.totalSteps*100;return t().createElement("div",{className:"progress-bar-container"},t().createElement("div",{className:"progress-bar",style:{width:"".concat(r,"%")}}))};const a=function(n){var o,i,a,c=n.steps,u=n.automatic,s=n.theme,d=void 0===s?"light":s,m=n.isProgressBar,f=r((0,e.useState)(0),2),g=f[0],h=f[1],v=r((0,e.useState)({}),2),p=v[0],y=v[1],b=(0,e.useRef)(null);(0,e.useEffect)((function(){return u?(clearTimeout(b.current),b.current=setTimeout(E,2e3)):clearTimeout(b.current),function(){clearTimeout(b.current)}}),[g,u]),(0,e.useEffect)((function(){var e=function(e){"ArrowRight"===e.key?E():"ArrowLeft"===e.key&&S()};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[g]);var E=function(){g<c.length-1?h(g+1):(w(),y({opacity:0}))},w=function(){var e=c[g],t=document.querySelector(null==e?void 0:e.selector);t&&(t.classList.remove("highlighted"),t.classList.remove("guideme-highlighted-".concat(d)))},S=function(){g>0&&(clearTimeout(b.current),h(g-1))};(0,e.useEffect)((function(){return function(){if(g<c.length){var e=c[g],t=document.querySelector(null==e?void 0:e.selector);if(t){var r=function(e,t){var r={},n=document.querySelector(".guideme-modal"),o=n.offsetHeight,i=n.getBoundingClientRect();switch(t){case"left":r.top=e.top+e.height/2+window.scrollY-i.height/2,r.left=e.left-400;break;case"right":r.top=e.top+e.height/2+window.scrollY-i.height/2,r.left=e.left+e.width+30;break;case"top":r.top=e.top+window.scrollY-o-30,r.left=e.left+e.width/2-i.width/2;break;case"bottom":r.top=e.bottom+30+window.scrollY,r.left=e.left+e.width/2-i.width/2}return r}(t.getBoundingClientRect(),null==e?void 0:e.modalPosition);y(r),t.classList.add("highlighted"),t.classList.add("guideme-highlighted-".concat(d)),u&&(clearTimeout(b.current),b.current=setTimeout(E,5e3))}}}(),function(){w()}}),[g,c]),(0,e.useEffect)((function(){if(g<c.length){var e=c[g],t=document.querySelector(null==e?void 0:e.selector);t&&t.scrollIntoView({behavior:"smooth",block:"center"})}}),[g,c]);var N=function(){h(c.length),w(),y({opacity:0})},k="guideme-journey-theme-".concat(d);return t().createElement("div",{className:"guideme-modal ".concat(k," "),"data-aos":"zoom-in-up",style:p},t().createElement("div",{className:"guideme-modal-content"},t().createElement("div",{className:"guideme-modal-header"},t().createElement("h4",{className:"guideme-heading"},t().createElement("span",{className:"guideme-steps-name"},g+1,"/",c.length)," ",null===(o=c[g])||void 0===o?void 0:o.title),t().createElement("button",{className:"guideme-modal-close-button",onClick:N},"✖")),t().createElement("div",{className:"guideme-modal-body"},t().createElement("p",{className:"guideme-content"},null===(i=c[g])||void 0===i?void 0:i.content)),t().createElement("div",{className:"guideme-circle-array"},c.map((function(e,r){return t().createElement("div",{key:r,className:"guideme-circle ".concat(r===g?"active":""),onClick:function(){return function(e){h(e)}(r)}})}))),m&&t().createElement(l,{currentStep:g,totalSteps:c.length}),!u&&t().createElement(t().Fragment,null,t().createElement("hr",null),t().createElement("div",{className:"guideme-modal-footer right"},t().createElement("button",{onClick:S,disabled:0===g,className:"guideme-modal-button"},"Previous"),g!==c.length-1&&t().createElement("button",{onClick:E,disabled:g===c.length-1,className:"guideme-modal-button"},"Next"),g===c.length-1&&t().createElement("button",{onClick:N,className:"guideme-modal-button skip-button"},"Skip"))),t().createElement("div",{className:"guideme-modal-arrow ".concat(null===(a=c[g])||void 0===a?void 0:a.modalPosition)})))}})(),o})()));
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.Guideme=t(require("react")):e.Guideme=t(e.react)}(self,(e=>(()=>{"use strict";var t={156:t=>{t.exports=e}},r={};function n(e){var o=r[e];if(void 0!==o)return o.exports;var i=r[e]={exports:{}};return t[e](i,i.exports,n),i.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};return(()=>{n.r(o),n.d(o,{GuideMe:()=>a});var e=n(156),t=n.n(e);function r(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,i,l,a=[],c=!0,u=!1;try{if(i=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;c=!1}else for(;!(c=(n=i.call(r)).done)&&(a.push(n.value),a.length!==t);c=!0);}catch(e){u=!0,o=e}finally{try{if(!c&&null!=r.return&&(l=r.return(),Object(l)!==l))return}finally{if(u)throw o}}return a}}(e,t)||function(e,t){if(e){if("string"==typeof e)return i(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?i(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var l=function(e){var r=(e.currentStep+1)/e.totalSteps*100;return t().createElement("div",{className:"progress-bar-container"},t().createElement("div",{className:"progress-bar",style:{width:"".concat(r,"%")}}))};const a=function(n){var o,i,a,c=n.steps,u=n.automatic,s=void 0!==u&&u,d=n.theme,m=void 0===d?"light":d,f=n.isProgressBar,g=void 0!==f&&f,v=r((0,e.useState)(0),2),h=v[0],p=v[1],y=r((0,e.useState)({}),2),b=y[0],E=y[1],w=(0,e.useRef)(null);(0,e.useEffect)((function(){return s?(clearTimeout(w.current),w.current=setTimeout(S,2e3)):clearTimeout(w.current),function(){clearTimeout(w.current)}}),[h,s]),(0,e.useEffect)((function(){var e=function(e){"ArrowRight"===e.key?S():"ArrowLeft"===e.key&&k()};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[h]);var S=function(){h<c.length-1?p(h+1):(N(),E({opacity:0}))},N=function(){var e=c[h],t=document.querySelector(null==e?void 0:e.selector);t&&(t.classList.remove("highlighted"),t.classList.remove("guideme-highlighted-".concat(m)))},k=function(){h>0&&(clearTimeout(w.current),p(h-1))};(0,e.useEffect)((function(){return function(){if(h<c.length){var e=c[h],t=document.querySelector(null==e?void 0:e.selector);if(t){var r=function(e,t){var r={},n=document.querySelector(".guideme-modal"),o=n.offsetHeight,i=n.getBoundingClientRect();switch(t){case"left":r.top=e.top+e.height/2+window.scrollY-i.height/2,r.left=e.left-400;break;case"right":r.top=e.top+e.height/2+window.scrollY-i.height/2,r.left=e.left+e.width+30;break;case"top":r.top=e.top+window.scrollY-o-30,r.left=e.left+e.width/2-i.width/2;break;case"bottom":r.top=e.bottom+30+window.scrollY,r.left=e.left+e.width/2-i.width/2}return r}(t.getBoundingClientRect(),null==e?void 0:e.modalPosition);E(r),t.classList.add("highlighted"),t.classList.add("guideme-highlighted-".concat(m)),s&&(clearTimeout(w.current),w.current=setTimeout(S,5e3))}}}(),function(){N()}}),[h,c]),(0,e.useEffect)((function(){if(h<c.length){var e=c[h],t=document.querySelector(null==e?void 0:e.selector);t&&t.scrollIntoView({behavior:"smooth",block:"center"})}}),[h,c]);var j=function(){p(c.length),N(),E({opacity:0})},x="guideme-journey-theme-".concat(m);return t().createElement("div",{className:"guideme-modal ".concat(x," "),"data-aos":"zoom-in-up",style:b},t().createElement("div",{className:"guideme-modal-content"},t().createElement("div",{className:"guideme-modal-header"},t().createElement("h4",{className:"guideme-heading"},t().createElement("span",{className:"guideme-steps-name"},h+1,"/",c.length)," ",null===(o=c[h])||void 0===o?void 0:o.title),t().createElement("button",{className:"guideme-modal-close-button",onClick:j},"✖")),t().createElement("div",{className:"guideme-modal-body"},t().createElement("p",{className:"guideme-content"},null===(i=c[h])||void 0===i?void 0:i.content)),t().createElement("div",{className:"guideme-circle-array"},c.map((function(e,r){return t().createElement("div",{key:r,className:"guideme-circle ".concat(r===h?"active":""),onClick:function(){return function(e){p(e)}(r)}})}))),g&&t().createElement(l,{currentStep:h,totalSteps:c.length}),!s&&t().createElement(t().Fragment,null,t().createElement("hr",null),t().createElement("div",{className:"guideme-modal-footer right"},t().createElement("button",{onClick:k,disabled:0===h,className:"guideme-modal-button"},"Previous"),h!==c.length-1&&t().createElement("button",{onClick:S,disabled:h===c.length-1,className:"guideme-modal-button"},"Next"),h===c.length-1&&t().createElement("button",{onClick:j,className:"guideme-modal-button skip-button"},"Done"))),t().createElement("div",{className:"guideme-modal-arrow ".concat(null===(a=c[h])||void 0===a?void 0:a.modalPosition)})))}})(),o})()));
{
"name": "react-guideme",
"version": "1.0.1",
"version": "1.0.2",
"description": "User Onboarding experience with interactive modals, designed to guide your users step-by-step through your application. With our user-friendly GuideMe library, you can create captivating onboarding journeys that will leave a lasting impression on your users.",
"main": "dist/index.js",
"files": [
"dist" ],
"scripts": {

@@ -7,0 +9,0 @@ "build": "webpack",

@@ -86,6 +86,4 @@ # React GuideMe Library

- **progressbar:** A boolean value that enables a progress bar to indicate the user's position in the guided tour. (Default: false)
- **isProgressBar:** A boolean value that enables a progress bar to indicate the user's position in the guided tour. (Default: false)
- **bulletNavigation:** A boolean value that enables bullet navigation for easy step navigation. (Default: false)
Feel free to adjust these props according to your requirements to create the perfect onboarding experience for your users.

@@ -92,0 +90,0 @@

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc