typeit-react - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

dist/typeit-react.es.min.js

@@ -5,3 +5,3 @@ /**
   * Author: Alex MacArthur <[e-mail]> (https://macarthur.me)
-  * Version: v0.0.1
+  * Version: v0.0.2
   * License: GPL-2.0
@@ -11,3 +11,3 @@ * URL: undefined
   */
-import{createElement as t,useRef as e,useEffect as n}from"react";
+import{createElement as t,useRef as e,useEffect as n,useState as i}from"react";
 /*! *****************************************************************************
@@ -26,2 +26,2 @@ Copyright (c) Microsoft Corporation. All rights reserved.
 and limitations under the License.
-***************************************************************************** */var i=function(){return(i=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++)for(var r in e=arguments[n])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t}).apply(this,arguments)};function r(t){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}var o={strings:[],speed:100,cursor:!0,cursorChar:"|",cursorSpeed:1e3,deleteSpeed:null,lifeLike:!0,breakLines:!0,startDelay:250,startDelete:!1,nextStringDelay:750,loop:!1,loopDelay:750,html:!0,waitUntilVisible:!1,beforeString:function(){},afterString:function(){},beforeStep:function(){},afterStep:function(){},afterComplete:function(){}};function s(){var t=this,e=this,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;this.insert=function(e,n){t.waiting.splice(e,0,n)},this.add=function(t){var n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return Array.isArray(t[0])?(e.waiting=e.waiting.concat(t),e):(e.waiting[n?"unshift":"push"](t),e)},this.delete=function(e){return t.waiting.splice(e,1),t},this.reset=function(){return t.waiting=t.executed.concat(t.waiting),t.executed=[],t},this.executed=[],this.waiting=n,!n.length&&i&&this.add(i)}var u=function(t){return document.createElement(t)};function a(t,e){return Math.abs(Math.random()*(t+e-(t-e))+(t-e))}function c(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",n=u("style");n.id=e,n.appendChild(document.createTextNode(t)),document.head.appendChild(n)}function l(t){return t.map((function(t){return t.replace(/<\!--.*?-->/g,"")}))}var f=function(t){return["textarea","input"].indexOf(t.tagName.toLowerCase())>-1},h=function(t){return Array.isArray(t)?t:[t]},p=function(t){return[].slice.call(t)},d=function(t,e){var n=t.nextSibling;return!!n&&!n.isEqualNode(e)},v=function(t,e){var n=e;if(f(t))t.value="".concat(t.value).concat(n);else{var i=p(t.childNodes).filter((function(t){return t.classList&&t.classList.contains("ti-cursor")}));if(i=i.length?i[0]:null,"object"==r(e)&&!(e instanceof HTMLElement)){var o=e.ancestorTree.slice(0).reverse().join(" "),s=p(t.querySelectorAll("".concat(o))),a=(s=s.filter((function(t){return!i||!i.isEqualNode(t)}))).length>0?s[s.length-1]:null;if(a&&function(t,e){if(!t)return!1;for(var n=!1,i=[],r=t;!n;)i.push(d(r,e)),(r=r.parentNode)&&r.hasAttribute&&!r.hasAttribute("data-typeit-id")||(n=!0);return!i.some((function(t){return t}))}(a,i))t=a,n=e.content;else if(n=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",i=u(t);return e.forEach((function(t){i.setAttribute(t.name,t.value)})),i.innerHTML=n,i}(e.ancestorTree[0],e.attributes,e.content),e.ancestorTree.length>1){var c=p(t.querySelectorAll(e.ancestorTree[1]));t=c[c.length-1]}}n="object"==r(n)?n:document.createTextNode(n),t.insertBefore(n,i&&t.hasAttribute("data-typeit-id")?i:null)}},y=function(t){var e=[];return e.concat.apply(e,t)},m=function(t){var e=document.implementation.createHTMLDocument("");return e.body.innerHTML=t,e.body},g=function(t){return p(t.childNodes).map((function(t){return 3===t.nodeType?t.nodeValue.split(""):t}))},b=function(t,e,n){return{ancestorTree:e,attributes:(i=t,p(i.attributes).map((function(t){return{name:t.name,value:t.nodeValue}}))),content:n};var i},w=function(t,e){var n=b(t,e,""),i=g(t).map((function(n,i){return Array.isArray(n)?n.map((function(n,i){return b(t,e,n)})):n}));return i.unshift(n),y(i)},S=function(t){return t instanceof HTMLElement&&"BR"!==t.tagName},q=function t(e){var n=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=e.map((function(t){if(S(t)){if(!n)return p(t.childNodes);for(var e=t.parentNode,i=[t.tagName];["BODY","HTML"].indexOf(e.tagName)<0;)i.push(e.tagName),e=e.parentNode;return w(t,i)}return t}));return(i=y(i)).some((function(t){return S(t)}))?t(i,n):i};function A(t){var e=m(t),n=g(e);return q(n)}function N(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];return e?A(t):t.split("")}var T=function(t,e){e?t.value="":t.querySelector(".ti-cursor")&&(t.innerHTML="")},x=function(t,e){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],i=!Array.isArray(t),r=t.length;return(t=i?new Array(t).fill(0):t).map((function(t,o){if(i)return e;var s=[e,t];return n&&(0===o&&s.push({isFirst:!0}),o+1===r&&s.push({isLast:!0})),s}))},L=function(t){t.parentNode.removeChild(t)},O=function(t){return 3!==t.nodeType&&"BR"!==t.tagName&&!t.firstChild},E=function(t){return t.some((function(t){return O(t)}))},D=function(t){for(var e=p(t.querySelectorAll("*")),n=E(e);e.length&&n;){var i=!1;e.forEach((function(t){O(t)&&(L(t),i=!0)})),i&&(e=p(t.querySelectorAll("*"))),n=E(e)}return e},$=function(t){return Array.isArray(t)||(t=[t/2,t/2]),{before:t[0],after:t[1],total:t[0]+t[1]}};function P(t,e,n){var i=(e=null!==e?e:t/3)/2;return n?[a(t,t/2),a(e,i)]:[t,e]}function M(){var t=this,e=this,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=n.typeIt,a=n.element,d=n.id,y=n.options,g=n.queue,b=void 0===g?[]:g,w=n.isAReset,S=void 0!==w&&w,O=function(){var e=p(t.$e.childNodes).filter((function(t){return!t.isEqualNode(R)}));return q(e,!1)},E=function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,i=e.opts.nextStringDelay;e.queue.insert(t,[e.pause,i.before]),e.queue.insert(t+n+1,[e.pause,i.after])},j=function(){!z&&t.opts.cursor&&(c("@keyframes blink-".concat(d," { 0% {opacity: 0} 49% {opacity: 0} 50% {opacity: 1} }[data-typeit-id='").concat(d,"'] .ti-cursor { animation: blink-").concat(d," ").concat(t.opts.cursorSpeed/1e3,"s infinite; }"),d),(R=u("span")).innerHTML=m(t.opts.cursorChar).innerHTML,R.className="ti-cursor",R.setAttribute("style","display:inline;position:relative;font:inherit;color:inherit;line-height:inherit;"),t.$e.appendChild(R))};this.wait=function(t,e){this.timeouts.push(setTimeout(t,e))};var C=function(){t.opts.strings.forEach((function(e,n){var i=N(e,t.opts.html);t.queue.add(x(i,t.type,!0));var r=t.queue.waiting.length;if(n+1!==t.opts.strings.length){if(t.opts.breakLines)return t.queue.add([t.type,u("BR")]),void E(r);t.queue.add(x(i,t.delete)),E(r,e.length)}}))},H=function(e){t.queue.reset().delete(0).add([t.pause,e.before],!0);for(var n=0;n<O().length;n++)t.queue.add([t.delete,null,{isPhantom:!0}],!0)},k=function(e){var n=t.$e.innerHTML;return n?(t.$e.innerHTML="",t.opts.startDelete?(A(n).forEach((function(e){v(t.$e,e)})),t.queue.add([t.delete,!0]),E(1),e):[n.trim()].concat(e)):e};this.pause=function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];return new Promise((function(n,i){t.wait((function(){return n()}),e||t.opts.nextStringDelay.total)}))},this.reset=function(){return this.queue.reset(),new M({typeIt:i,element:this.$e,id:d,options:this.opts,queue:this.queue.waiting,isAReset:!0})},this.init=function(){var t=this;if(!this.status.started){if(j(),!this.opts.waitUntilVisible)return this.status.started=!0,this.fire();new IntersectionObserver((function(e,n){e.forEach((function(e){e.isIntersecting&&(t.fire(),n.unobserve(t.$e))}))}),{threshold:1}).observe(this.$e)}},this.fire=function(){for(var t=this,e=this,n=this.queue.waiting.slice(),r=Promise.resolve(),o=function(t){var o=n[t],s=[o,e.queue,i];r=r.then((function(){return new Promise((function(t,n){var i,r;if(e.status.frozen)return n();e.pace=P(e.opts.speed,e.opts.deleteSpeed,e.opts.lifeLike),o[2]&&o[2].isFirst&&(i=e.opts).beforeString.apply(i,s),(r=e.opts).beforeStep.apply(r,s),o[0].call(e,o[1],o[2]).then((function(){var n,i,r=e.queue.waiting.shift();return o[2]&&o[2].isPhantom?t():(o[2]&&o[2].isLast&&(n=e.opts).afterString.apply(n,s),(i=e.opts).afterStep.apply(i,s),e.queue.executed.push(r),t())}))}))}))},s=0;s<n.length;s++)o(s);r.then((function(){if(t.opts.loop){var e=t.opts.loopDelay?t.opts.loopDelay:t.opts.nextStringDelay;t.wait((function(){H(e),t.fire()}),e.after)}t.status.completed=!0,t.opts.afterComplete(i)})).catch((function(){}))},this.type=function(t){var e=this;return"object"!=r(t)||t.content?new Promise((function(n){e.wait((function(){return v(e.$e,t),n()}),e.pace[0])})):(v(this.$e,t),Promise.resolve())},this.empty=function(){var t=this;return new Promise((function(e){return z?t.$e.value="":p(t.$e.childNodes).forEach((function(t){R.isEqualNode(t)||L(t)})),e()}))},this.delete=function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];return new Promise((function(n){t.wait((function(){var i=O();return i.length&&L(i[i.length-1]),D(t.$e),e&&i.length-1>0?t.delete(!0).then((function(){return n()})):n()}),t.pace[1])}))},this.setOptions=function(t){var e=this;return new Promise((function(n){return e.opts=Object.assign({},e.opts,t),n()}))};var R=null,z=f(a);this.status={started:!1,complete:!1,frozen:!1,destroyed:!1},this.$e=a,this.timeouts=[],this.opts=Object.assign({},o,y),this.opts.html=!z&&this.opts.html,this.opts.nextStringDelay=$(this.opts.nextStringDelay),this.opts.loopDelay=$(this.opts.loopDelay),this.queue=new s(b,[this.pause,this.opts.startDelay]),this.$e.setAttribute("data-typeit-id",d),c("[data-typeit-id]:before {content: '.'; display: inline-block; width: 0; visibility: hidden;}"),T(a,z);var I=h(this.opts.strings);I=k(I),this.opts.strings=l(I),this.opts.strings.length&&!S&&C()}function j(t,e){var n,i=this,r=this;this.instances=(n=t,"string"==typeof n?n=document.querySelectorAll(n):n.forEach||(n=[n]),p(n)).map((function(t){return new M({typeIt:i,element:t,id:Math.random().toString(36).substring(2,15),options:e,queue:[],isAReset:!1})}));var o=function(t){i.instances.forEach((function(e){t.call(i,e)}))},s=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1;o((function(i){var o="string"!=typeof t,s=o?t:i[t],u=x(n,[s,o?r:e]);i.queue.add(u)}))};this.is=function(t){return e=this.instances,n=t,!0,!!e.length&&!e.some((function(t){return!0!==t.status[n]}));var e,n},this.freeze=function(){o((function(t){t.status.frozen=!0}))},this.unfreeze=function(){o((function(t){t.status.frozen&&(t.status.frozen=!1,t.fire())}))},this.type=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return o((function(e){var n=N(t,e.opts.html);e.queue.add(x(n,e.type,!0))})),this},this.delete=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;return s("delete",null===t,null===t?1:t),this},this.pause=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;return s("pause",t),this},this.break=function(){return s("type",u("BR")),this},this.options=function(t){return s("setOptions",t),this},this.exec=function(t){return s(t),this},this.destroy=function(){var t=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];this.instances=this.instances.map((function(e){if(e.timeouts.forEach((function(t){clearTimeout(t)})),e.timeouts=[],t){var n=e.isInput?null:e.$e.querySelector(".ti-cursor");n&&e.$e.removeChild(n)}return e.status.destroyed=!0,e}))},this.empty=function(){return s("empty"),this},this.reset=function(){return this.destroy(),this.instances=this.instances.map((function(t){return t.reset()})),this},this.go=function(){return o((function(t){t.init()})),this}}var C=e,H=n,k=function(e){var n=C(null),r=e.options,o=e.element,s=e.children,u=function(t,e){var n={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(t);r<i.length;r++)e.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(t,i[r])&&(n[i[r]]=t[i[r]])}return n}(e,["options","element","children"]),a=o;return H((function(){var t=new j(n.current,i({},r)).go();return function(){t.destroy()}}),[]),t(a,i({ref:n},u),s)};k.defaultProps={element:"span",options:{}};export default k;
+***************************************************************************** */var r=function(){return(r=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++)for(var r in e=arguments[n])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t}).apply(this,arguments)};function o(t){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}var s={strings:[],speed:100,cursor:!0,cursorChar:"|",cursorSpeed:1e3,deleteSpeed:null,lifeLike:!0,breakLines:!0,startDelay:250,startDelete:!1,nextStringDelay:750,loop:!1,loopDelay:750,html:!0,waitUntilVisible:!1,beforeString:function(){},afterString:function(){},beforeStep:function(){},afterStep:function(){},afterComplete:function(){}};function u(){var t=this,e=this,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;this.insert=function(e,n){t.waiting.splice(e,0,n)},this.add=function(t){var n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return Array.isArray(t[0])?(e.waiting=e.waiting.concat(t),e):(e.waiting[n?"unshift":"push"](t),e)},this.delete=function(e){return t.waiting.splice(e,1),t},this.reset=function(){return t.waiting=t.executed.concat(t.waiting),t.executed=[],t},this.executed=[],this.waiting=n,!n.length&&i&&this.add(i)}var a=function(t){return document.createElement(t)};function c(t,e){return Math.abs(Math.random()*(t+e-(t-e))+(t-e))}function l(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",n=a("style");n.id=e,n.appendChild(document.createTextNode(t)),document.head.appendChild(n)}function f(t){return t.map((function(t){return t.replace(/<\!--.*?-->/g,"")}))}var h=function(t){return["textarea","input"].indexOf(t.tagName.toLowerCase())>-1},p=function(t){return Array.isArray(t)?t:[t]},d=function(t){return[].slice.call(t)},v=function(t,e){var n=t.nextSibling;return!!n&&!n.isEqualNode(e)},y=function(t,e){var n=e;if(h(t))t.value="".concat(t.value).concat(n);else{var i=d(t.childNodes).filter((function(t){return t.classList&&t.classList.contains("ti-cursor")}));if(i=i.length?i[0]:null,"object"==o(e)&&!(e instanceof HTMLElement)){var r=e.ancestorTree.slice(0).reverse().join(" "),s=d(t.querySelectorAll("".concat(r))),u=(s=s.filter((function(t){return!i||!i.isEqualNode(t)}))).length>0?s[s.length-1]:null;if(u&&function(t,e){if(!t)return!1;for(var n=!1,i=[],r=t;!n;)i.push(v(r,e)),(r=r.parentNode)&&r.hasAttribute&&!r.hasAttribute("data-typeit-id")||(n=!0);return!i.some((function(t){return t}))}(u,i))t=u,n=e.content;else if(n=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",i=a(t);return e.forEach((function(t){i.setAttribute(t.name,t.value)})),i.innerHTML=n,i}(e.ancestorTree[0],e.attributes,e.content),e.ancestorTree.length>1){var c=d(t.querySelectorAll(e.ancestorTree[1]));t=c[c.length-1]}}n="object"==o(n)?n:document.createTextNode(n),t.insertBefore(n,i&&t.hasAttribute("data-typeit-id")?i:null)}},g=function(t){var e=[];return e.concat.apply(e,t)},m=function(t){var e=document.implementation.createHTMLDocument("");return e.body.innerHTML=t,e.body},b=function(t){return d(t.childNodes).map((function(t){return 3===t.nodeType?t.nodeValue.split(""):t}))},w=function(t,e,n){return{ancestorTree:e,attributes:(i=t,d(i.attributes).map((function(t){return{name:t.name,value:t.nodeValue}}))),content:n};var i},S=function(t,e){var n=w(t,e,""),i=b(t).map((function(n,i){return Array.isArray(n)?n.map((function(n,i){return w(t,e,n)})):n}));return i.unshift(n),g(i)},q=function(t){return t instanceof HTMLElement&&"BR"!==t.tagName},A=function t(e){var n=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=e.map((function(t){if(q(t)){if(!n)return d(t.childNodes);for(var e=t.parentNode,i=[t.tagName];["BODY","HTML"].indexOf(e.tagName)<0;)i.push(e.tagName),e=e.parentNode;return S(t,i)}return t}));return(i=g(i)).some((function(t){return q(t)}))?t(i,n):i};function T(t){var e=m(t),n=b(e);return A(n)}function N(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];return e?T(t):t.split("")}var L=function(t,e){e?t.value="":t.querySelector(".ti-cursor")&&(t.innerHTML="")},x=function(t,e){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],i=!Array.isArray(t),r=t.length;return(t=i?new Array(t).fill(0):t).map((function(t,o){if(i)return e;var s=[e,t];return n&&(0===o&&s.push({isFirst:!0}),o+1===r&&s.push({isLast:!0})),s}))},O=function(t){t.parentNode.removeChild(t)},E=function(t){return 3!==t.nodeType&&"BR"!==t.tagName&&!t.firstChild},D=function(t){return t.some((function(t){return E(t)}))},$=function(t){for(var e=d(t.querySelectorAll("*")),n=D(e);e.length&&n;){var i=!1;e.forEach((function(t){E(t)&&(O(t),i=!0)})),i&&(e=d(t.querySelectorAll("*"))),n=D(e)}return e},M=function(t){return Array.isArray(t)||(t=[t/2,t/2]),{before:t[0],after:t[1],total:t[0]+t[1]}};function P(t,e,n){var i=(e=null!==e?e:t/3)/2;return n?[c(t,t/2),c(e,i)]:[t,e]}function I(){var t=this,e=this,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=n.typeIt,r=n.element,c=n.id,v=n.options,g=n.queue,b=void 0===g?[]:g,w=n.isAReset,S=void 0!==w&&w,q=function(){var e=d(t.$e.childNodes).filter((function(t){return!t.isEqualNode(k)}));return A(e,!1)},E=function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,i=e.opts.nextStringDelay;e.queue.insert(t,[e.pause,i.before]),e.queue.insert(t+n+1,[e.pause,i.after])},D=function(){!B&&t.opts.cursor&&(l("@keyframes blink-".concat(c," { 0% {opacity: 0} 49% {opacity: 0} 50% {opacity: 1} }[data-typeit-id='").concat(c,"'] .ti-cursor { animation: blink-").concat(c," ").concat(t.opts.cursorSpeed/1e3,"s infinite; }"),c),(k=a("span")).innerHTML=m(t.opts.cursorChar).innerHTML,k.className="ti-cursor",k.setAttribute("style","display:inline;position:relative;font:inherit;color:inherit;line-height:inherit;"),t.$e.appendChild(k))};this.wait=function(t,e){this.timeouts.push(setTimeout(t,e))};var j=function(){t.opts.strings.forEach((function(e,n){var i=N(e,t.opts.html);t.queue.add(x(i,t.type,!0));var r=t.queue.waiting.length;if(n+1!==t.opts.strings.length){if(t.opts.breakLines)return t.queue.add([t.type,a("BR")]),void E(r);t.queue.add(x(i,t.delete)),E(r,e.length)}}))},H=function(e){t.queue.reset().delete(0).add([t.pause,e.before],!0);for(var n=0;n<q().length;n++)t.queue.add([t.delete,null,{isPhantom:!0}],!0)},C=function(e){var n=t.$e.innerHTML;return n?(t.$e.innerHTML="",t.opts.startDelete?(T(n).forEach((function(e){y(t.$e,e)})),t.queue.add([t.delete,!0]),E(1),e):[n.trim()].concat(e)):e};this.pause=function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];return new Promise((function(n,i){t.wait((function(){return n()}),e||t.opts.nextStringDelay.total)}))},this.reset=function(){return this.queue.reset(),new I({typeIt:i,element:this.$e,id:c,options:this.opts,queue:this.queue.waiting,isAReset:!0})},this.init=function(){var t=this;if(!this.status.started){if(D(),!this.opts.waitUntilVisible)return this.status.started=!0,this.fire();new IntersectionObserver((function(e,n){e.forEach((function(e){e.isIntersecting&&(t.fire(),n.unobserve(t.$e))}))}),{threshold:1}).observe(this.$e)}},this.fire=function(){for(var t=this,e=this,n=this.queue.waiting.slice(),r=Promise.resolve(),o=function(t){var o=n[t],s=[o,e.queue,i];r=r.then((function(){return new Promise((function(t,n){var i,r;if(e.status.frozen)return n();e.pace=P(e.opts.speed,e.opts.deleteSpeed,e.opts.lifeLike),o[2]&&o[2].isFirst&&(i=e.opts).beforeString.apply(i,s),(r=e.opts).beforeStep.apply(r,s),o[0].call(e,o[1],o[2]).then((function(){var n,i,r=e.queue.waiting.shift();return o[2]&&o[2].isPhantom?t():(o[2]&&o[2].isLast&&(n=e.opts).afterString.apply(n,s),(i=e.opts).afterStep.apply(i,s),e.queue.executed.push(r),t())}))}))}))},s=0;s<n.length;s++)o(s);r.then((function(){if(t.opts.loop){var e=t.opts.loopDelay?t.opts.loopDelay:t.opts.nextStringDelay;t.wait((function(){H(e),t.fire()}),e.after)}t.status.completed=!0,t.opts.afterComplete(i)})).catch((function(){}))},this.type=function(t){var e=this;return"object"!=o(t)||t.content?new Promise((function(n){e.wait((function(){return y(e.$e,t),n()}),e.pace[0])})):(y(this.$e,t),Promise.resolve())},this.empty=function(){var t=this;return new Promise((function(e){return B?t.$e.value="":d(t.$e.childNodes).forEach((function(t){k.isEqualNode(t)||O(t)})),e()}))},this.delete=function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];return new Promise((function(n){t.wait((function(){var i=q();return i.length&&O(i[i.length-1]),$(t.$e),e&&i.length-1>0?t.delete(!0).then((function(){return n()})):n()}),t.pace[1])}))},this.setOptions=function(t){var e=this;return new Promise((function(n){return e.opts=Object.assign({},e.opts,t),n()}))};var k=null,B=h(r);this.status={started:!1,complete:!1,frozen:!1,destroyed:!1},this.$e=r,this.timeouts=[],this.opts=Object.assign({},s,v),this.opts.html=!B&&this.opts.html,this.opts.nextStringDelay=M(this.opts.nextStringDelay),this.opts.loopDelay=M(this.opts.loopDelay),this.queue=new u(b,[this.pause,this.opts.startDelay]),this.$e.setAttribute("data-typeit-id",c),l("[data-typeit-id]:before {content: '.'; display: inline-block; width: 0; visibility: hidden;}"),L(r,B);var R=p(this.opts.strings);R=C(R),this.opts.strings=f(R),this.opts.strings.length&&!S&&j()}function j(t,e){var n,i=this,r=this;this.instances=(n=t,"string"==typeof n?n=document.querySelectorAll(n):n.forEach||(n=[n]),d(n)).map((function(t){return new I({typeIt:i,element:t,id:Math.random().toString(36).substring(2,15),options:e,queue:[],isAReset:!1})}));var o=function(t){i.instances.forEach((function(e){t.call(i,e)}))},s=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1;o((function(i){var o="string"!=typeof t,s=o?t:i[t],u=x(n,[s,o?r:e]);i.queue.add(u)}))};this.is=function(t){return e=this.instances,n=t,!0,!!e.length&&!e.some((function(t){return!0!==t.status[n]}));var e,n},this.freeze=function(){o((function(t){t.status.frozen=!0}))},this.unfreeze=function(){o((function(t){t.status.frozen&&(t.status.frozen=!1,t.fire())}))},this.type=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return o((function(e){var n=N(t,e.opts.html);e.queue.add(x(n,e.type,!0))})),this},this.delete=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;return s("delete",null===t,null===t?1:t),this},this.pause=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;return s("pause",t),this},this.break=function(){return s("type",a("BR")),this},this.options=function(t){return s("setOptions",t),this},this.exec=function(t){return s(t),this},this.destroy=function(){var t=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];this.instances=this.instances.map((function(e){if(e.timeouts.forEach((function(t){clearTimeout(t)})),e.timeouts=[],t){var n=e.isInput?null:e.$e.querySelector(".ti-cursor");n&&e.$e.removeChild(n)}return e.status.destroyed=!0,e}))},this.empty=function(){return s("empty"),this},this.reset=function(){return this.destroy(),this.instances=this.instances.map((function(t){return t.reset()})),this},this.go=function(){return o((function(t){t.init()})),this}}var H=e,C=n,k=i,B=function(e){var n=k(!0),i=n[0],o=n[1],s=H(null),u=e.options,a=e.element,c=e.children,l=e.getBeforeInit,f=e.getAfterInit,h=function(t,e){var n={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(t);r<i.length;r++)e.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(t,i[r])&&(n[i[r]]=t[i[r]])}return n}(e,["options","element","children","getBeforeInit","getAfterInit"]),p=a;return C((function(){c&&(u.strings=s.current.innerHTML),o(!1)}),[]),C((function(){if(!i){var t=new j(s.current,r({},u));return(t=l(t)).go(),t=f(t),function(){t.destroy()}}}),[i]),t("div",{style:{opacity:i?0:1}},t(p,r({ref:s},h),i&&c))};B.defaultProps={element:"span",options:{},getBeforeInit:function(t){return t},getAfterInit:function(t){return t}};export default B;

dist/typeit-react.min.js

@@ -5,3 +5,3 @@ /**
   * Author: Alex MacArthur <[e-mail]> (https://macarthur.me)
-  * Version: v0.0.1
+  * Version: v0.0.2
   * License: GPL-2.0
@@ -25,2 +25,2 @@ * URL: undefined
     and limitations under the License.
-    ***************************************************************************** */var e=function(){return(e=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++)for(var r in e=arguments[n])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t}).apply(this,arguments)};function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}var i={strings:[],speed:100,cursor:!0,cursorChar:"|",cursorSpeed:1e3,deleteSpeed:null,lifeLike:!0,breakLines:!0,startDelay:250,startDelete:!1,nextStringDelay:750,loop:!1,loopDelay:750,html:!0,waitUntilVisible:!1,beforeString:function(){},afterString:function(){},beforeStep:function(){},afterStep:function(){},afterComplete:function(){}};function r(){var t=this,e=this,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;this.insert=function(e,n){t.waiting.splice(e,0,n)},this.add=function(t){var n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return Array.isArray(t[0])?(e.waiting=e.waiting.concat(t),e):(e.waiting[n?"unshift":"push"](t),e)},this.delete=function(e){return t.waiting.splice(e,1),t},this.reset=function(){return t.waiting=t.executed.concat(t.waiting),t.executed=[],t},this.executed=[],this.waiting=n,!n.length&&i&&this.add(i)}var o=function(t){return document.createElement(t)};function u(t,e){return Math.abs(Math.random()*(t+e-(t-e))+(t-e))}function s(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",n=o("style");n.id=e,n.appendChild(document.createTextNode(t)),document.head.appendChild(n)}function a(t){return t.map((function(t){return t.replace(/<\!--.*?-->/g,"")}))}var c=function(t){return["textarea","input"].indexOf(t.tagName.toLowerCase())>-1},l=function(t){return Array.isArray(t)?t:[t]},f=function(t){return[].slice.call(t)},h=function(t,e){var n=t.nextSibling;return!!n&&!n.isEqualNode(e)},p=function(t,e){var i=e;if(c(t))t.value="".concat(t.value).concat(i);else{var r=f(t.childNodes).filter((function(t){return t.classList&&t.classList.contains("ti-cursor")}));if(r=r.length?r[0]:null,"object"==n(e)&&!(e instanceof HTMLElement)){var u=e.ancestorTree.slice(0).reverse().join(" "),s=f(t.querySelectorAll("".concat(u))),a=(s=s.filter((function(t){return!r||!r.isEqualNode(t)}))).length>0?s[s.length-1]:null;if(a&&function(t,e){if(!t)return!1;for(var n=!1,i=[],r=t;!n;)i.push(h(r,e)),(r=r.parentNode)&&r.hasAttribute&&!r.hasAttribute("data-typeit-id")||(n=!0);return!i.some((function(t){return t}))}(a,r))t=a,i=e.content;else if(i=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",i=o(t);return e.forEach((function(t){i.setAttribute(t.name,t.value)})),i.innerHTML=n,i}(e.ancestorTree[0],e.attributes,e.content),e.ancestorTree.length>1){var l=f(t.querySelectorAll(e.ancestorTree[1]));t=l[l.length-1]}}i="object"==n(i)?i:document.createTextNode(i),t.insertBefore(i,r&&t.hasAttribute("data-typeit-id")?r:null)}},d=function(t){var e=[];return e.concat.apply(e,t)},v=function(t){var e=document.implementation.createHTMLDocument("");return e.body.innerHTML=t,e.body},y=function(t){return f(t.childNodes).map((function(t){return 3===t.nodeType?t.nodeValue.split(""):t}))},m=function(t,e,n){return{ancestorTree:e,attributes:(i=t,f(i.attributes).map((function(t){return{name:t.name,value:t.nodeValue}}))),content:n};var i},g=function(t,e){var n=m(t,e,""),i=y(t).map((function(n,i){return Array.isArray(n)?n.map((function(n,i){return m(t,e,n)})):n}));return i.unshift(n),d(i)},b=function(t){return t instanceof HTMLElement&&"BR"!==t.tagName},w=function t(e){var n=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=e.map((function(t){if(b(t)){if(!n)return f(t.childNodes);for(var e=t.parentNode,i=[t.tagName];["BODY","HTML"].indexOf(e.tagName)<0;)i.push(e.tagName),e=e.parentNode;return g(t,i)}return t}));return(i=d(i)).some((function(t){return b(t)}))?t(i,n):i};function S(t){var e=v(t),n=y(e);return w(n)}function q(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];return e?S(t):t.split("")}var A=function(t,e){e?t.value="":t.querySelector(".ti-cursor")&&(t.innerHTML="")},T=function(t,e){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],i=!Array.isArray(t),r=t.length;return(t=i?new Array(t).fill(0):t).map((function(t,o){if(i)return e;var u=[e,t];return n&&(0===o&&u.push({isFirst:!0}),o+1===r&&u.push({isLast:!0})),u}))},N=function(t){t.parentNode.removeChild(t)},x=function(t){return 3!==t.nodeType&&"BR"!==t.tagName&&!t.firstChild},L=function(t){return t.some((function(t){return x(t)}))},O=function(t){for(var e=f(t.querySelectorAll("*")),n=L(e);e.length&&n;){var i=!1;e.forEach((function(t){x(t)&&(N(t),i=!0)})),i&&(e=f(t.querySelectorAll("*"))),n=L(e)}return e},E=function(t){return Array.isArray(t)||(t=[t/2,t/2]),{before:t[0],after:t[1],total:t[0]+t[1]}};function D(t,e,n){var i=(e=null!==e?e:t/3)/2;return n?[u(t,t/2),u(e,i)]:[t,e]}function $(){var t=this,e=this,u=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},h=u.typeIt,d=u.element,y=u.id,m=u.options,g=u.queue,b=void 0===g?[]:g,x=u.isAReset,L=void 0!==x&&x,P=function(){var e=f(t.$e.childNodes).filter((function(t){return!t.isEqualNode(R)}));return w(e,!1)},M=function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,i=e.opts.nextStringDelay;e.queue.insert(t,[e.pause,i.before]),e.queue.insert(t+n+1,[e.pause,i.after])},j=function(){!I&&t.opts.cursor&&(s("@keyframes blink-".concat(y," { 0% {opacity: 0} 49% {opacity: 0} 50% {opacity: 1} }[data-typeit-id='").concat(y,"'] .ti-cursor { animation: blink-").concat(y," ").concat(t.opts.cursorSpeed/1e3,"s infinite; }"),y),(R=o("span")).innerHTML=v(t.opts.cursorChar).innerHTML,R.className="ti-cursor",R.setAttribute("style","display:inline;position:relative;font:inherit;color:inherit;line-height:inherit;"),t.$e.appendChild(R))};this.wait=function(t,e){this.timeouts.push(setTimeout(t,e))};var C=function(){t.opts.strings.forEach((function(e,n){var i=q(e,t.opts.html);t.queue.add(T(i,t.type,!0));var r=t.queue.waiting.length;if(n+1!==t.opts.strings.length){if(t.opts.breakLines)return t.queue.add([t.type,o("BR")]),void M(r);t.queue.add(T(i,t.delete)),M(r,e.length)}}))},H=function(e){t.queue.reset().delete(0).add([t.pause,e.before],!0);for(var n=0;n<P().length;n++)t.queue.add([t.delete,null,{isPhantom:!0}],!0)},k=function(e){var n=t.$e.innerHTML;return n?(t.$e.innerHTML="",t.opts.startDelete?(S(n).forEach((function(e){p(t.$e,e)})),t.queue.add([t.delete,!0]),M(1),e):[n.trim()].concat(e)):e};this.pause=function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];return new Promise((function(n,i){t.wait((function(){return n()}),e||t.opts.nextStringDelay.total)}))},this.reset=function(){return this.queue.reset(),new $({typeIt:h,element:this.$e,id:y,options:this.opts,queue:this.queue.waiting,isAReset:!0})},this.init=function(){var t=this;if(!this.status.started){if(j(),!this.opts.waitUntilVisible)return this.status.started=!0,this.fire();new IntersectionObserver((function(e,n){e.forEach((function(e){e.isIntersecting&&(t.fire(),n.unobserve(t.$e))}))}),{threshold:1}).observe(this.$e)}},this.fire=function(){for(var t=this,e=this,n=this.queue.waiting.slice(),i=Promise.resolve(),r=function(t){var r=n[t],o=[r,e.queue,h];i=i.then((function(){return new Promise((function(t,n){var i,u;if(e.status.frozen)return n();e.pace=D(e.opts.speed,e.opts.deleteSpeed,e.opts.lifeLike),r[2]&&r[2].isFirst&&(i=e.opts).beforeString.apply(i,o),(u=e.opts).beforeStep.apply(u,o),r[0].call(e,r[1],r[2]).then((function(){var n,i,u=e.queue.waiting.shift();return r[2]&&r[2].isPhantom?t():(r[2]&&r[2].isLast&&(n=e.opts).afterString.apply(n,o),(i=e.opts).afterStep.apply(i,o),e.queue.executed.push(u),t())}))}))}))},o=0;o<n.length;o++)r(o);i.then((function(){if(t.opts.loop){var e=t.opts.loopDelay?t.opts.loopDelay:t.opts.nextStringDelay;t.wait((function(){H(e),t.fire()}),e.after)}t.status.completed=!0,t.opts.afterComplete(h)})).catch((function(){}))},this.type=function(t){var e=this;return"object"!=n(t)||t.content?new Promise((function(n){e.wait((function(){return p(e.$e,t),n()}),e.pace[0])})):(p(this.$e,t),Promise.resolve())},this.empty=function(){var t=this;return new Promise((function(e){return I?t.$e.value="":f(t.$e.childNodes).forEach((function(t){R.isEqualNode(t)||N(t)})),e()}))},this.delete=function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];return new Promise((function(n){t.wait((function(){var i=P();return i.length&&N(i[i.length-1]),O(t.$e),e&&i.length-1>0?t.delete(!0).then((function(){return n()})):n()}),t.pace[1])}))},this.setOptions=function(t){var e=this;return new Promise((function(n){return e.opts=Object.assign({},e.opts,t),n()}))};var R=null,I=c(d);this.status={started:!1,complete:!1,frozen:!1,destroyed:!1},this.$e=d,this.timeouts=[],this.opts=Object.assign({},i,m),this.opts.html=!I&&this.opts.html,this.opts.nextStringDelay=E(this.opts.nextStringDelay),this.opts.loopDelay=E(this.opts.loopDelay),this.queue=new r(b,[this.pause,this.opts.startDelay]),this.$e.setAttribute("data-typeit-id",y),s("[data-typeit-id]:before {content: '.'; display: inline-block; width: 0; visibility: hidden;}"),A(d,I);var z=l(this.opts.strings);z=k(z),this.opts.strings=a(z),this.opts.strings.length&&!L&&C()}function P(t,e){var n,i=this,r=this;this.instances=(n=t,"string"==typeof n?n=document.querySelectorAll(n):n.forEach||(n=[n]),f(n)).map((function(t){return new $({typeIt:i,element:t,id:Math.random().toString(36).substring(2,15),options:e,queue:[],isAReset:!1})}));var u=function(t){i.instances.forEach((function(e){t.call(i,e)}))},s=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1;u((function(i){var o="string"!=typeof t,u=o?t:i[t],s=T(n,[u,o?r:e]);i.queue.add(s)}))};this.is=function(t){return e=this.instances,n=t,!0,!!e.length&&!e.some((function(t){return!0!==t.status[n]}));var e,n},this.freeze=function(){u((function(t){t.status.frozen=!0}))},this.unfreeze=function(){u((function(t){t.status.frozen&&(t.status.frozen=!1,t.fire())}))},this.type=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return u((function(e){var n=q(t,e.opts.html);e.queue.add(T(n,e.type,!0))})),this},this.delete=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;return s("delete",null===t,null===t?1:t),this},this.pause=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;return s("pause",t),this},this.break=function(){return s("type",o("BR")),this},this.options=function(t){return s("setOptions",t),this},this.exec=function(t){return s(t),this},this.destroy=function(){var t=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];this.instances=this.instances.map((function(e){if(e.timeouts.forEach((function(t){clearTimeout(t)})),e.timeouts=[],t){var n=e.isInput?null:e.$e.querySelector(".ti-cursor");n&&e.$e.removeChild(n)}return e.status.destroyed=!0,e}))},this.empty=function(){return s("empty"),this},this.reset=function(){return this.destroy(),this.instances=this.instances.map((function(t){return t.reset()})),this},this.go=function(){return u((function(t){t.init()})),this}}var M=t.useRef,j=t.useEffect,C=function(n){var i=M(null),r=n.options,o=n.element,u=n.children,s=function(t,e){var n={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(t);r<i.length;r++)e.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(t,i[r])&&(n[i[r]]=t[i[r]])}return n}(n,["options","element","children"]),a=o;return j((function(){var t=new P(i.current,e({},r)).go();return function(){t.destroy()}}),[]),t.createElement(a,e({ref:i},s),u)};return C.defaultProps={element:"span",options:{}},C}));
+    ***************************************************************************** */var e=function(){return(e=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++)for(var r in e=arguments[n])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t}).apply(this,arguments)};function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}var i={strings:[],speed:100,cursor:!0,cursorChar:"|",cursorSpeed:1e3,deleteSpeed:null,lifeLike:!0,breakLines:!0,startDelay:250,startDelete:!1,nextStringDelay:750,loop:!1,loopDelay:750,html:!0,waitUntilVisible:!1,beforeString:function(){},afterString:function(){},beforeStep:function(){},afterStep:function(){},afterComplete:function(){}};function r(){var t=this,e=this,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;this.insert=function(e,n){t.waiting.splice(e,0,n)},this.add=function(t){var n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return Array.isArray(t[0])?(e.waiting=e.waiting.concat(t),e):(e.waiting[n?"unshift":"push"](t),e)},this.delete=function(e){return t.waiting.splice(e,1),t},this.reset=function(){return t.waiting=t.executed.concat(t.waiting),t.executed=[],t},this.executed=[],this.waiting=n,!n.length&&i&&this.add(i)}var o=function(t){return document.createElement(t)};function u(t,e){return Math.abs(Math.random()*(t+e-(t-e))+(t-e))}function s(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",n=o("style");n.id=e,n.appendChild(document.createTextNode(t)),document.head.appendChild(n)}function a(t){return t.map((function(t){return t.replace(/<\!--.*?-->/g,"")}))}var c=function(t){return["textarea","input"].indexOf(t.tagName.toLowerCase())>-1},f=function(t){return Array.isArray(t)?t:[t]},l=function(t){return[].slice.call(t)},h=function(t,e){var n=t.nextSibling;return!!n&&!n.isEqualNode(e)},p=function(t,e){var i=e;if(c(t))t.value="".concat(t.value).concat(i);else{var r=l(t.childNodes).filter((function(t){return t.classList&&t.classList.contains("ti-cursor")}));if(r=r.length?r[0]:null,"object"==n(e)&&!(e instanceof HTMLElement)){var u=e.ancestorTree.slice(0).reverse().join(" "),s=l(t.querySelectorAll("".concat(u))),a=(s=s.filter((function(t){return!r||!r.isEqualNode(t)}))).length>0?s[s.length-1]:null;if(a&&function(t,e){if(!t)return!1;for(var n=!1,i=[],r=t;!n;)i.push(h(r,e)),(r=r.parentNode)&&r.hasAttribute&&!r.hasAttribute("data-typeit-id")||(n=!0);return!i.some((function(t){return t}))}(a,r))t=a,i=e.content;else if(i=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",i=o(t);return e.forEach((function(t){i.setAttribute(t.name,t.value)})),i.innerHTML=n,i}(e.ancestorTree[0],e.attributes,e.content),e.ancestorTree.length>1){var f=l(t.querySelectorAll(e.ancestorTree[1]));t=f[f.length-1]}}i="object"==n(i)?i:document.createTextNode(i),t.insertBefore(i,r&&t.hasAttribute("data-typeit-id")?r:null)}},d=function(t){var e=[];return e.concat.apply(e,t)},v=function(t){var e=document.implementation.createHTMLDocument("");return e.body.innerHTML=t,e.body},y=function(t){return l(t.childNodes).map((function(t){return 3===t.nodeType?t.nodeValue.split(""):t}))},g=function(t,e,n){return{ancestorTree:e,attributes:(i=t,l(i.attributes).map((function(t){return{name:t.name,value:t.nodeValue}}))),content:n};var i},m=function(t,e){var n=g(t,e,""),i=y(t).map((function(n,i){return Array.isArray(n)?n.map((function(n,i){return g(t,e,n)})):n}));return i.unshift(n),d(i)},b=function(t){return t instanceof HTMLElement&&"BR"!==t.tagName},w=function t(e){var n=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=e.map((function(t){if(b(t)){if(!n)return l(t.childNodes);for(var e=t.parentNode,i=[t.tagName];["BODY","HTML"].indexOf(e.tagName)<0;)i.push(e.tagName),e=e.parentNode;return m(t,i)}return t}));return(i=d(i)).some((function(t){return b(t)}))?t(i,n):i};function S(t){var e=v(t),n=y(e);return w(n)}function q(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];return e?S(t):t.split("")}var A=function(t,e){e?t.value="":t.querySelector(".ti-cursor")&&(t.innerHTML="")},T=function(t,e){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],i=!Array.isArray(t),r=t.length;return(t=i?new Array(t).fill(0):t).map((function(t,o){if(i)return e;var u=[e,t];return n&&(0===o&&u.push({isFirst:!0}),o+1===r&&u.push({isLast:!0})),u}))},N=function(t){t.parentNode.removeChild(t)},x=function(t){return 3!==t.nodeType&&"BR"!==t.tagName&&!t.firstChild},L=function(t){return t.some((function(t){return x(t)}))},E=function(t){for(var e=l(t.querySelectorAll("*")),n=L(e);e.length&&n;){var i=!1;e.forEach((function(t){x(t)&&(N(t),i=!0)})),i&&(e=l(t.querySelectorAll("*"))),n=L(e)}return e},O=function(t){return Array.isArray(t)||(t=[t/2,t/2]),{before:t[0],after:t[1],total:t[0]+t[1]}};function D(t,e,n){var i=(e=null!==e?e:t/3)/2;return n?[u(t,t/2),u(e,i)]:[t,e]}function $(){var t=this,e=this,u=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},h=u.typeIt,d=u.element,y=u.id,g=u.options,m=u.queue,b=void 0===m?[]:m,x=u.isAReset,L=void 0!==x&&x,M=function(){var e=l(t.$e.childNodes).filter((function(t){return!t.isEqualNode(k)}));return w(e,!1)},P=function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,i=e.opts.nextStringDelay;e.queue.insert(t,[e.pause,i.before]),e.queue.insert(t+n+1,[e.pause,i.after])},I=function(){!B&&t.opts.cursor&&(s("@keyframes blink-".concat(y," { 0% {opacity: 0} 49% {opacity: 0} 50% {opacity: 1} }[data-typeit-id='").concat(y,"'] .ti-cursor { animation: blink-").concat(y," ").concat(t.opts.cursorSpeed/1e3,"s infinite; }"),y),(k=o("span")).innerHTML=v(t.opts.cursorChar).innerHTML,k.className="ti-cursor",k.setAttribute("style","display:inline;position:relative;font:inherit;color:inherit;line-height:inherit;"),t.$e.appendChild(k))};this.wait=function(t,e){this.timeouts.push(setTimeout(t,e))};var j=function(){t.opts.strings.forEach((function(e,n){var i=q(e,t.opts.html);t.queue.add(T(i,t.type,!0));var r=t.queue.waiting.length;if(n+1!==t.opts.strings.length){if(t.opts.breakLines)return t.queue.add([t.type,o("BR")]),void P(r);t.queue.add(T(i,t.delete)),P(r,e.length)}}))},H=function(e){t.queue.reset().delete(0).add([t.pause,e.before],!0);for(var n=0;n<M().length;n++)t.queue.add([t.delete,null,{isPhantom:!0}],!0)},C=function(e){var n=t.$e.innerHTML;return n?(t.$e.innerHTML="",t.opts.startDelete?(S(n).forEach((function(e){p(t.$e,e)})),t.queue.add([t.delete,!0]),P(1),e):[n.trim()].concat(e)):e};this.pause=function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];return new Promise((function(n,i){t.wait((function(){return n()}),e||t.opts.nextStringDelay.total)}))},this.reset=function(){return this.queue.reset(),new $({typeIt:h,element:this.$e,id:y,options:this.opts,queue:this.queue.waiting,isAReset:!0})},this.init=function(){var t=this;if(!this.status.started){if(I(),!this.opts.waitUntilVisible)return this.status.started=!0,this.fire();new IntersectionObserver((function(e,n){e.forEach((function(e){e.isIntersecting&&(t.fire(),n.unobserve(t.$e))}))}),{threshold:1}).observe(this.$e)}},this.fire=function(){for(var t=this,e=this,n=this.queue.waiting.slice(),i=Promise.resolve(),r=function(t){var r=n[t],o=[r,e.queue,h];i=i.then((function(){return new Promise((function(t,n){var i,u;if(e.status.frozen)return n();e.pace=D(e.opts.speed,e.opts.deleteSpeed,e.opts.lifeLike),r[2]&&r[2].isFirst&&(i=e.opts).beforeString.apply(i,o),(u=e.opts).beforeStep.apply(u,o),r[0].call(e,r[1],r[2]).then((function(){var n,i,u=e.queue.waiting.shift();return r[2]&&r[2].isPhantom?t():(r[2]&&r[2].isLast&&(n=e.opts).afterString.apply(n,o),(i=e.opts).afterStep.apply(i,o),e.queue.executed.push(u),t())}))}))}))},o=0;o<n.length;o++)r(o);i.then((function(){if(t.opts.loop){var e=t.opts.loopDelay?t.opts.loopDelay:t.opts.nextStringDelay;t.wait((function(){H(e),t.fire()}),e.after)}t.status.completed=!0,t.opts.afterComplete(h)})).catch((function(){}))},this.type=function(t){var e=this;return"object"!=n(t)||t.content?new Promise((function(n){e.wait((function(){return p(e.$e,t),n()}),e.pace[0])})):(p(this.$e,t),Promise.resolve())},this.empty=function(){var t=this;return new Promise((function(e){return B?t.$e.value="":l(t.$e.childNodes).forEach((function(t){k.isEqualNode(t)||N(t)})),e()}))},this.delete=function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];return new Promise((function(n){t.wait((function(){var i=M();return i.length&&N(i[i.length-1]),E(t.$e),e&&i.length-1>0?t.delete(!0).then((function(){return n()})):n()}),t.pace[1])}))},this.setOptions=function(t){var e=this;return new Promise((function(n){return e.opts=Object.assign({},e.opts,t),n()}))};var k=null,B=c(d);this.status={started:!1,complete:!1,frozen:!1,destroyed:!1},this.$e=d,this.timeouts=[],this.opts=Object.assign({},i,g),this.opts.html=!B&&this.opts.html,this.opts.nextStringDelay=O(this.opts.nextStringDelay),this.opts.loopDelay=O(this.opts.loopDelay),this.queue=new r(b,[this.pause,this.opts.startDelay]),this.$e.setAttribute("data-typeit-id",y),s("[data-typeit-id]:before {content: '.'; display: inline-block; width: 0; visibility: hidden;}"),A(d,B);var R=f(this.opts.strings);R=C(R),this.opts.strings=a(R),this.opts.strings.length&&!L&&j()}function M(t,e){var n,i=this,r=this;this.instances=(n=t,"string"==typeof n?n=document.querySelectorAll(n):n.forEach||(n=[n]),l(n)).map((function(t){return new $({typeIt:i,element:t,id:Math.random().toString(36).substring(2,15),options:e,queue:[],isAReset:!1})}));var u=function(t){i.instances.forEach((function(e){t.call(i,e)}))},s=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1;u((function(i){var o="string"!=typeof t,u=o?t:i[t],s=T(n,[u,o?r:e]);i.queue.add(s)}))};this.is=function(t){return e=this.instances,n=t,!0,!!e.length&&!e.some((function(t){return!0!==t.status[n]}));var e,n},this.freeze=function(){u((function(t){t.status.frozen=!0}))},this.unfreeze=function(){u((function(t){t.status.frozen&&(t.status.frozen=!1,t.fire())}))},this.type=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return u((function(e){var n=q(t,e.opts.html);e.queue.add(T(n,e.type,!0))})),this},this.delete=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;return s("delete",null===t,null===t?1:t),this},this.pause=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;return s("pause",t),this},this.break=function(){return s("type",o("BR")),this},this.options=function(t){return s("setOptions",t),this},this.exec=function(t){return s(t),this},this.destroy=function(){var t=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];this.instances=this.instances.map((function(e){if(e.timeouts.forEach((function(t){clearTimeout(t)})),e.timeouts=[],t){var n=e.isInput?null:e.$e.querySelector(".ti-cursor");n&&e.$e.removeChild(n)}return e.status.destroyed=!0,e}))},this.empty=function(){return s("empty"),this},this.reset=function(){return this.destroy(),this.instances=this.instances.map((function(t){return t.reset()})),this},this.go=function(){return u((function(t){t.init()})),this}}var P=t.useRef,I=t.useEffect,j=t.useState,H=function(n){var i=j(!0),r=i[0],o=i[1],u=P(null),s=n.options,a=n.element,c=n.children,f=n.getBeforeInit,l=n.getAfterInit,h=function(t,e){var n={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(t);r<i.length;r++)e.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(t,i[r])&&(n[i[r]]=t[i[r]])}return n}(n,["options","element","children","getBeforeInit","getAfterInit"]),p=a;return I((function(){c&&(s.strings=u.current.innerHTML),o(!1)}),[]),I((function(){if(!r){var t=new M(u.current,e({},s));return(t=f(t)).go(),t=l(t),function(){t.destroy()}}}),[r]),t.createElement("div",{style:{opacity:r?0:1}},t.createElement(p,e({ref:u},h),r&&c))};return H.defaultProps={element:"span",options:{},getBeforeInit:function(t){return t},getAfterInit:function(t){return t}},H}));

package.json

 {
   "name": "typeit-react",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "React component for the most versatile JavaScript animated typing utility on the planet.",
@@ -23,3 +23,3 @@ "main": "dist/typeit-react.min.js",
     "type effect",
-    "text effects", 
+    "text effects",
     "react"
@@ -26,0 +26,0 @@ ],

README.md

@@ -28,3 +28,5 @@ # TypeIt - React
     <div className="App">
-      <TypeIt>This will be typed in a `span` element!</TypeIt>
+      <TypeIt>
+        This will be typed in a `span` element!
+      </TypeIt>
     </div>
@@ -35,7 +37,30 @@ );
 
-Note: This approach will cause the string to first be rendered in the markup and _then_ picked up by TypeIt, which might be desired if you're using it with a statically rendered application (ex: GatsbyJS). However, it may also cause a brief flash of text when the page loads. For an alternative way to define strings, see below.
+### A More Complex Example
 
+The component will allow its children to fully render, and then type whatever HTML is generated. So, in addition to simple strings, you can nest HTML and components like below.
+
+```javascript
+import TypeIt from "typeit-react";
+
+// This could be any component that generates HTML.
+const SuperStrong = ({children}) => {
+  return (
+    <strong style={{fontSize: "80px"}}>{children}</strong>
+  )
+}
+
+export default () => {
+  return (
+    <div className="App">
+      <TypeIt>
+        Weak text. <SuperStrong>Super strong text.</SuperStrong>
+      </TypeIt>
+    </div>
+  );
+};
+```
+
 ### Customizing Your Options
 
-To tweak the animation to your liking, pass an object as the `options` prop. All options supported by TypeIt can be used here. Using this prop, you can also set strings without passing them as children. To view all options, see [TypeIt's documentation](https://typeitjs.com/docs#options).
+To tweak the animation to your liking, pass an object as the `options` prop. All options supported by the core TypeIt library can be used here. Using this prop, you can also set strings without passing them as children. See [TypeIt's documentation](https://typeitjs.com/docs#options) for more details on what's available.
 
@@ -60,3 +85,3 @@ ```javascript
 
-### Choose Your Own Element
+### Choosing Your Own Element
 
@@ -77,2 +102,64 @@ Out of the box, a `span` element is used to contain the typing animation. To choose your own element, use the `element` prop.
 
+### Fine-Tuning the Instance w/ Companion Methods
+
+TypeIt comes with a set of [special methods](https://typeitjs.com/docs#instance-methods) that let you fine-tune an animation down to the smallest detail. To leverage them here, pass a function as the `onBeforeInit` prop, which will give you access to the instance you can modify with these methods, and then return back to the component before the animation is initialized. 
+
+```javascript
+import TypeIt from "typeit-react";
+
+<TypeIt  
+  getBeforeInit={(instance) => {
+    instance
+      .type("Hi, I'm Alxe")
+      .pause(750)
+      .delete(2)
+      .pause(500)
+      .type("ex!");
+
+    // Remember to return it!
+    return instance;
+  }}
+/>
+```
+
+### Accessing the Instance After Initalization
+
+Similarly, the `getAfterInit` prop allows you to access the instance _after_ it's been kicked off, so you'll be able to leverage methods like `.freeze()`, `.unfreeze()`, and `.is()`. Read more about those [here](https://typeitjs.com/docs#non-chainable-instance-methods).
+
+```javascript
+export default () => {
+  const [buttonText, setButtonText] = useState("Freeze");
+  const [instance, setInstance] = useState(null);
+
+  const toggleFreeze = () => {  
+    if(instance.is('frozen')) {
+      instance.unfreeze();
+      setButtonText('Freeze');
+      return;
+    }    
+
+    instance.freeze();
+    setButtonText('Unfreeze');
+  }
+
+  return (
+    <div className="App">
+      <button onClick={toggleFreeze}>
+        {buttonText}
+      </button>
+
+      <TypeIt  
+        options={{ loop: true }}
+        getAfterInit={(instance) => {  
+          setInstance(instance);
+          return instance;
+        }}
+      >
+        This will just keep on going.
+      </TypeIt>
+    </div>
+  );
+}
+```
+
 ## Need Help?
@@ -79,0 +166,0 @@

types/index.d.ts

 declare namespace JSX {
     interface IntrinsicElements {
-        DynamicElement: any
+        DynamicElement: any, 
+        ref: HTMLElement | null
     }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

37597

increased by11.87%

Lines of code

311

increased by13.5%

Number of lines in readme file

168

increased by107.41%

No dependency changes