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

typeit-react

Package Overview
Dependencies
Maintainers
1
Versions
69
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

typeit-react - npm Package Compare versions

Comparing version 2.0.4 to 2.0.5

dist/index.es.js

33

dist/index.d.ts

@@ -1,13 +0,24 @@

import * as React from 'react';
export interface TypeItOptions {
strings?: Array<string> | string;
/// <reference types="react" />
declare module "helpers/isVoidElement" {
const _default: (elementName: string) => boolean;
/**
* Given the name of an element, check if it's one of the "void" elements,
* which cannot contain any children.
*/
export default _default;
}
export interface TypeItProps {
as?: keyof JSX.IntrinsicElements;
options?: TypeItOptions;
children?: React.ReactNode;
getBeforeInit?: (instance: any) => Function;
getAfterInit?: (instance: any) => Function;
declare module "index" {
import * as React from 'react';
export interface TypeItOptions {
strings?: Array<string> | string;
}
export interface TypeItProps {
as?: keyof JSX.IntrinsicElements;
options?: TypeItOptions;
children?: React.ReactNode;
getBeforeInit?: (instance: any) => Function;
getAfterInit?: (instance: any) => Function;
}
const TypeIt: React.FunctionComponent<TypeItProps>;
export default TypeIt;
}
declare const TypeIt: React.FunctionComponent<TypeItProps>;
export default TypeIt;

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

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):(e||self).TypeIt=t(e.react)}(this,function(e){function t(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}}),t.default=e,t}var n=t(e);function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}const o=[null,null,{}];var i=(e,t)=>Object.assign({},e,t),u=e=>Array.from(e),s=e=>{let t=document.implementation.createHTMLDocument();return t.body.innerHTML=e,t.body};const c=(e,t=null,n=!1)=>{let r=u(e.childNodes).flatMap(e=>{return 3===(t=e).nodeType||"BR"===t.tagName?e:c(e);var t});return t&&(r=r.filter(e=>!t.contains(e))),n?r.reverse():r},l=(e,t=null)=>({node:t,content:e});function a(e){let t=s(e);return c(t).flatMap(e=>e.nodeValue?u(e.nodeValue).map(t=>l(t,e)):l(e))}function f(e,t=!0){return t?a(e):u(e).map(e=>l(e))}var h=e=>document.createElement(e),d=e=>document.createTextNode(e),m=(e,t="")=>{let n=h("style");n.id=t,n.appendChild(d(e)),document.head.appendChild(n)},v=e=>Array.isArray(e);const p=e=>Number.isInteger(e),y=(e,t=document,n=!1)=>t["querySelector"+(n?"All":"")](e),g={started:!1,completed:!1,frozen:!1,destroyed:!1},b={breakLines:!0,cursor:!0,cursorChar:"|",cursorSpeed:1e3,deleteSpeed:null,html:!0,lifeLike:!0,loop:!1,loopDelay:750,nextStringDelay:750,speed:100,startDelay:250,startDelete:!1,strings:[],waitUntilVisible:!1,beforeString:()=>{},afterString:()=>{},beforeStep:()=>{},afterStep:()=>{},afterComplete:()=>{}};var P=({el:e,move:t,cursorPos:n,to:r})=>p(t)?-1*t:((e,t,n="START")=>{let r=new RegExp("END","i").test(n),o=y(".ti-cursor",t),i=e?y(e,t):t,u=c(i,o,!0),s=u[0],l=u[u.length-1],a=r&&!e?0:c(t,o,!0).findIndex(e=>e.isSameNode(r?s:l));return r&&a--,a+1})(t,e,r)-n,S=e=>(v(e)||(e=[e/2,e/2]),e),T=(e,t)=>Math.abs(Math.random()*(e+t-(e-t))+(e-t));let j=e=>e/2;var M=e=>"value"in e;const N=e=>"function"==typeof e?e():e;var w=e=>"BODY"===e.tagName;const E=(e,t)=>{let n=u(y("*",t,!0));return[t].concat(n.reverse()).find(t=>t.cloneNode().isEqualNode(e.cloneNode()))},L=(e,t,n,r)=>{let o=t.content instanceof HTMLElement,i=t.node,u=null==i?void 0:i.parentNode,s=o?t.content:d(t.content);if(M(e))return void(e.value=""+e.value+t.content);if(!o&&u&&!w(u)){let r=E(u,e);if(r&&((e,t)=>{let n=e.nextSibling;return!n||n.isEqualNode(t)})(r,n))e=r;else{s=u.cloneNode(),s.appendChild(d(t.content));let n=u.parentNode,r=n.cloneNode();if(!w(n)){let t=E(r,e);for(;!t&&!w(n);){let o=r;o.innerHTML=s.outerHTML,s=o,n=n.parentNode,r=n.cloneNode(),t=E(r,e)}e=t||e}}}let l=c(e,n,!0)[r-1],a=l?l.parentNode:e;a.insertBefore(s,a.contains(n)?n:null)};var x=e=>e&&e.remove();const k={"font-family":"","font-weight":"","font-size":"","font-style":"","line-height":"",color:"","margin-left":"-.125em","margin-right":".125em"};function D(e,t,n){if(!e.s){if(n instanceof O){if(!n.s)return void(n.o=D.bind(null,e,t));1&t&&(t=n.s),n=n.v}if(n&&n.then)return void n.then(D.bind(null,e,t),D.bind(null,e,2));e.s=t,e.v=n;const r=e.o;r&&r(e)}}const O=function(){function e(){}return e.prototype.then=function(t,n){const r=new e,o=this.s;if(o){const e=1&o?t:n;if(e){try{D(r,1,e(this.v))}catch(e){D(r,2,e)}return r}return this}return this.o=function(e){try{const o=e.v;1&e.s?D(r,1,t?t(o):o):n?D(r,1,n(o)):D(r,2,o)}catch(e){D(r,2,e)}},r},e}();function I(e){return e instanceof O&&1&e.s}function C(e,t,n){var r,o,i=-1;return function u(s){try{for(;++i<e.length&&(!n||!n());)if((s=t(i))&&s.then){if(!I(s))return void s.then(u,o||(o=D.bind(null,r=new O,2)));s=s.v}r?D(r,1,s):r=s}catch(e){D(r||(r=new O),2,e)}}(),r}function H(e,t,n){for(var r;;){var o=e();if(I(o)&&(o=o.v),!o)return i;if(o.then){r=0;break}var i=n();if(i&&i.then){if(!I(i)){r=1;break}i=i.s}if(t){var u=t();if(u&&u.then&&!I(u)){r=2;break}}}var s=new O,c=D.bind(null,s,2);return(0===r?o.then(a):1===r?i.then(l):u.then(f)).then(void 0,c),s;function l(r){i=r;do{if(t&&(u=t())&&u.then&&!I(u))return void u.then(f).then(void 0,c);if(!(o=e())||I(o)&&!o.v)return void D(s,1,i);if(o.then)return void o.then(a).then(void 0,c);I(i=n())&&(i=i.v)}while(!i||!i.then);i.then(l).then(void 0,c)}function a(e){e?(i=n())&&i.then?i.then(l).then(void 0,c):l(i):D(s,1,i)}function f(){(o=e())?o.then?o.then(a).then(void 0,c):a(o):D(s,1,i)}}function z(e,t={}){const n=this,r=this,d=function(e,t,r=!1){try{function o(){function o(o){return Promise.resolve(function(e,t,n){try{return Promise.resolve(new Promise(r=>{n.push(setTimeout(function(){try{return Promise.resolve(e()).then(function(){r()})}catch(e){return Promise.reject(e)}},t))}))}catch(e){return Promise.reject(e)}}(e,t,J)).then(function(){return r?void 0:Promise.resolve(Z.afterStep(n)).then(function(e){})})}return r?o():Promise.resolve(Z.beforeStep(n)).then(o)}const i=function(){if(X.frozen)return Promise.resolve(new Promise(e=>{n.unfreeze=()=>{X.frozen=!1,e()}})).then(function(){})}();return Promise.resolve(i&&i.then?i.then(o):o())}catch(e){return Promise.reject(e)}},w=()=>M(F),E=e=>function(e){let{speed:t,deleteSpeed:n,lifeLike:r}=e;return n=null!==n?n:t/3,r?[T(t,j(t)),T(n,j(n))]:[t,n]}(Z)[e],D=(e,t=0)=>e?E(t):0,O=(e,t)=>(ee.add(e),((e={})=>{let t=e.delay;t&&ee.add([[q,t]])})(t),this),I=()=>(e=>M(e)?u(e.value):c(e,y(".ti-cursor",e),!0))(F),z=(e={})=>[[_,e],[_,Z]],A=e=>{let t=Z.nextStringDelay;ee.add([[q,t[0]],...e,[q,t[1]]])},B=e=>{te&&(ne.classList.toggle("disabled",e),ne.classList.toggle("with-delay",!e))},R=function(){try{let e;X.started=!0;let t=ee.getItems();const n=function(e,n){try{var o=function(){function e(){return X.completed=!0,Promise.resolve(Z.afterComplete(r)).then(function(){if(!Z.loop)throw"";let e=Z.loopDelay;d(function(){try{return Promise.resolve(function(e){try{function t(t){return ee.reset(),ee.set(0,[q,e,{}]),Promise.resolve(Y({num:null})).then(function(){})}return Promise.resolve(K?Promise.resolve(V({value:K})).then(t):t())}catch(e){return Promise.reject(e)}}(e[0])).then(function(){R()})}catch(e){return Promise.reject(e)}},e[1])})}const n=C(t,function(e){let n=t[e],o=n[2];return o.freezeCursor&&B(!0),Promise.resolve(n[0].call(r,n[1],o)).then(function(){ee.setMeta(e,{executed:!0}),B(!1)})});return n&&n.then?n.then(e):e()}()}catch(e){return}return o&&o.then?o.then(void 0,function(){}):o}();return Promise.resolve(n&&n.then?n.then(function(t){return e?t:r}):e?n:r)}catch(e){return Promise.reject(e)}},q=(e=0)=>d(()=>{},e),V=function({value:e,to:t="START",instant:n=!1}){try{let r=P({el:F,move:e,cursorPos:K,to:t}),o=()=>{var e,t,n;e=r<0?-1:1,t=K,n=I(),K=Math.min(Math.max(t+e,0),n.length),((e,t,n,r)=>{let o=t[r-1];(e=(null==o?void 0:o.parentNode)||e).insertBefore(n,o||null)})(F,I(),ne,K)};return Promise.resolve(d(function(){try{let e=0;const t=H(function(){return e<Math.abs(r)},function(){return e++},function(){return n?void o():Promise.resolve(d(o,E(0))).then(function(e){})});return Promise.resolve(t&&t.then?t.then(function(){}):void 0)}catch(e){return Promise.reject(e)}},D(n))).then(function(){})}catch(e){return Promise.reject(e)}},U=({chars:e,instant:t,silent:n})=>{const r=this;return d(function(){try{function o(o){function u(){return n?void 0:Promise.resolve(Z.afterString(e,r)).then(function(e){})}const s=C(e,function(n){return t?void i(e[n]):Promise.resolve(d(()=>{i(e[n])},E(0))).then(function(e){})});return s&&s.then?s.then(u):u()}const i=e=>L(F,e,ne,K);return Promise.resolve(n?o():Promise.resolve(Z.beforeString(e,r)).then(o))}catch(e){return Promise.reject(e)}},D(t),!0)},_=function(e){try{return Z=i(Z,e),Promise.resolve()}catch(e){return Promise.reject(e)}},Q=function(){try{return w()?(F.value="",Promise.resolve()):(I().forEach(e=>{x(e)}),Promise.resolve())}catch(e){return Promise.reject(e)}},Y=function({num:e=null,instant:t=!1,to:n="START"}){try{return Promise.resolve(d(function(){try{let r=p(e)?e:P({el:F,move:e,cursorPos:K,to:n});const o=()=>{let e=I();var t;e.length&&(w()?F.value=F.value.slice(0,-1):(x(e[K]),t=ne,y("*",F,!0).forEach(e=>{if(!e.innerHTML&&"BR"!==e.tagName&&!e.isSameNode(t)){let t=e;for(;1===t.parentElement.childNodes.length;)t=t.parentElement;x(t)}})))};let i=0;const u=H(function(){return i<r},function(){return i++},function(){return t?void o():Promise.resolve(d(o,E(1))).then(function(e){})});return Promise.resolve(u&&u.then?u.then(function(){}):void 0)}catch(e){return Promise.reject(e)}},D(t,1))).then(function(){const t=function(){if(null===e&&I().length-1>0)return Promise.resolve(Y({num:null})).then(function(){})}();if(t&&t.then)return t.then(function(){})})}catch(e){return Promise.reject(e)}};this.break=function(e){const t=l(h("BR"));return O([[U,{chars:[t],silent:!0}]],e)},this.delete=function(e=null,t={}){e=N(e);let n=z(t),r=e,{instant:o,to:i}=t;return O([n[0],[Y,{num:r,instant:o,to:i},W],n[1]],t)},this.empty=function(e={}){return O([[Q]],e)},this.exec=function(e,t){let n=z(t);return O([n[0],[e,null],n[1]],t)},this.move=function(e,t={}){e=N(e);let n=z(t),{instant:r,to:o}=t;return O([n[0],[V,{value:null===e?"":e,to:o,instant:r},W],n[1]],t)},this.options=function(e){return e=N(e),O([[_,e]],e)},this.pause=function(e,t={}){return O([[q,N(e)]],t)},this.type=function(e,t={}){e=N(e);let n=z(t),r=f(e,Z.html),{instant:o}=t;return O([n[0],[U,{chars:r,instant:o},W],n[1]],t)},this.is=function(e){return X[e]},this.destroy=function(e=!0){J.forEach(e=>clearTimeout(e)),J=[],N(e)&&x(ne),X.destroyed=!0},this.freeze=function(){X.frozen=!0},this.unfreeze=function(){},this.reset=function(){!this.is("destroyed")&&this.destroy(),ee.reset(),K=0;for(let e in X)X[e]=!1;return F[w()?"value":"innerHTML"]="",this},this.go=function(){return X.started?this:(function(){try{!w()&&F.appendChild(ne),te?(((e,t,n)=>{let r="[data-typeit-id='"+e+"'] .ti-cursor",o=getComputedStyle(n),i=Object.entries(k).reduce((e,[t,n])=>e+" "+t+": var(--ti-"+t+", "+(n||o[t])+");","");m("@keyframes blink-"+e+" { 0% {opacity: 0} 49% {opacity: 0} 50% {opacity: 1} } "+r+" { display: inline; letter-spacing: -1em; "+i+" animation: blink-"+e+" "+t.cursorSpeed/1e3+"s infinite; } "+r+".with-delay { animation-delay: 500ms; } "+r+".disabled { animation: none; }",e)})($,Z,F),Promise.resolve()):Promise.resolve()}catch(e){return Promise.reject(e)}}(),Z.waitUntilVisible?(((e,t)=>{new IntersectionObserver((n,r)=>{n.forEach(n=>{n.isIntersecting&&(t(),r.unobserve(e))})},{threshold:1}).observe(e)})(F,R.bind(this)),this):(R(),this))},this.getQueue=function(){return ee},this.getOptions=function(){return Z},this.getElement=function(){return F};let F="string"==typeof(G=e)?y(G):G;var G;let J=[],K=0,W={freezeCursor:!0},X=i({},g),Z=i(b,t);Z=i(Z,{html:!w()&&Z.html,nextStringDelay:S(Z.nextStringDelay),loopDelay:S(Z.loopDelay)});let $=Math.random().toString().substring(2,9),ee=function(e){const t=function(e){return n=n.concat(e.map(e=>o.map((t,n)=>e[n]?e[n]:t))),this};let n=[];return t(e),{add:t,set:function(e,t){n[e]=t},reset:function(){n=n.map(e=>(e[2].executed=!1,e))},getItems:function(){return n.filter(e=>!e[2].executed)},setMeta:function(e,t){n[e][2]=i(n[e][2],t)}}}([[q,Z.startDelay]]);F.dataset.typeitId=$,m("[data-typeit-id]:before {content: '.'; display: inline-block; width: 0; visibility: hidden;}");let te=Z.cursor&&!w(),ne=(()=>{if(w())return;let e=h("span");return e.className="ti-cursor",te?(e.innerHTML=s(Z.cursorChar).innerHTML,e):(e.style.visibility="hidden",e)})();var re;Z.strings=(e=>{let t=F.innerHTML;return t?(F.innerHTML="",Z.startDelete?(a(t).forEach(e=>{L(F,e,ne,K)}),A([[Y,{num:null}]]),e):t.trim().split(/<br(?:\s*?)(?:\/)?>/).concat(e)):e})(v(re=Z.strings)?re:[re]),Z.strings.length&&(()=>{let e=Z.strings.filter(e=>!!e);e.forEach((t,n)=>{let r=f(t,Z.html);if(ee.add([[U,{chars:r},W]]),n+1===e.length)return;const o=Z.breakLines?[[U,{chars:[l(h("BR"))],silent:!0},W]]:[[Y,{num:r.length},W]];A(o)})})()}var A=["area","base","br","col","embed","hr","img","input","link","meta","param","source","track","wbr"],B=["options","as","children","getBeforeInit","getAfterInit"],R=n.useRef,q=n.useEffect,V=n.useState,U=n.useMemo,_=function(e){var t=V(!0),o=t[0],i=t[1],u=R(null),s=e.options,c=e.as,l=e.children,a=e.getBeforeInit,f=e.getAfterInit,h=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t.indexOf(n=i[r])>=0||(o[n]=e[n]);return o}(e,B),d=c,m=U(function(){return A.indexOf(d.toLowerCase())>-1},[d]);return q(function(){l&&(s.strings=u.current.innerHTML),i(!1)},[]),q(function(){if(!o){var e=new z(u.current,r({},s));return(e=a(e)).go(),e=f(e),function(){e.destroy()}}},[o]),n.createElement("div",{style:{opacity:o?0:1}},m?n.createElement(d,r({ref:u},h)):n.createElement(d,r({ref:u},h),o&&l))};return _.defaultProps={as:"span",options:{},getBeforeInit:function(e){return e},getAfterInit:function(e){return e}},_});
var Ze=Object.defineProperty;var U=Object.getOwnPropertySymbols;var ge=Object.prototype.hasOwnProperty,be=Object.prototype.propertyIsEnumerable;var ve=(p,y,m)=>y in p?Ze(p,y,{enumerable:!0,configurable:!0,writable:!0,value:m}):p[y]=m,V=(p,y)=>{for(var m in y||(y={}))ge.call(y,m)&&ve(p,m,y[m]);if(U)for(var m of U(y))be.call(y,m)&&ve(p,m,y[m]);return p};var Se=(p,y)=>{var m={};for(var E in p)ge.call(p,E)&&y.indexOf(E)<0&&(m[E]=p[E]);if(p!=null&&U)for(var E of U(p))y.indexOf(E)<0&&be.call(p,E)&&(m[E]=p[E]);return m};(function(p,y){typeof exports=="object"&&typeof module!="undefined"?module.exports=y(require("react")):typeof define=="function"&&define.amd?define(["react"],y):(p=typeof globalThis!="undefined"?globalThis:p||self,p.TypeIt=y(p.React))})(this,function(p){"use strict";function y(e){if(e&&e.__esModule)return e;var n={__proto__:null,[Symbol.toStringTag]:"Module"};return e&&Object.keys(e).forEach(function(r){if(r!=="default"){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}}),n.default=e,Object.freeze(n)}var m=y(p);const E=[null,null,{}];var Te=e=>e.map(n=>E.map((r,o)=>n[o]?n[o]:r)),k=(e,n)=>Object.assign({},e,n);const _e=function(e){const n=function(l){return c=c.concat(Te(l)),this},r=function(l,h){c[l]=h},o=function(){c=c.map(l=>(l[2].executed=!1,l))},i=function(){return c.filter(l=>!l[2].executed)},b=function(l,h){c[l][2]=k(c[l][2],h)};let c=[];return n(e),{add:n,set:r,reset:o,getItems:i,setMeta:b}};var x=e=>Array.from(e),te=e=>{let n=document.implementation.createHTMLDocument();return n.body.innerHTML=e,n.body},we=e=>e.nodeType===3||e.tagName==="BR";const L=(e,n=null,r=!1)=>{let o=x(e.childNodes).flatMap(i=>we(i)?i:L(i));return n&&(o=o.filter(i=>!n.contains(i))),r?o.reverse():o},Ee=e=>L(e).flatMap(r=>r.nodeValue?x(r.nodeValue).map(o=>B(o,r)):B(r)),B=(e,n=null)=>({node:n,content:e});function ne(e){let n=te(e);return Ee(n)}function re(e,n=!0){return n?ne(e):x(e).map(r=>B(r))}var z=e=>document.createElement(e),F=e=>document.createTextNode(e),oe=(e,n="")=>{let r=z("style");r.id=n,r.appendChild(F(e)),document.head.appendChild(r)},se=e=>Array.isArray(e),Ne=e=>se(e)?e:[e];const ie=e=>Number.isInteger(e),P=(e,n=document,r=!1)=>n[`querySelector${r?"All":""}`](e),le="data-typeit-id",O="ti-cursor",K="START",Ce="END",Ie={started:!1,completed:!1,frozen:!1,destroyed:!1},Me={breakLines:!0,cursor:!0,cursorChar:"|",cursorSpeed:1e3,deleteSpeed:null,html:!0,lifeLike:!0,loop:!1,loopDelay:750,nextStringDelay:750,speed:100,startDelay:250,startDelete:!1,strings:[],waitUntilVisible:!1,beforeString:()=>{},afterString:()=>{},beforeStep:()=>{},afterStep:()=>{},afterComplete:()=>{}},Ae=(e,n,r=K)=>{let o=new RegExp(Ce,"i").test(r),i=P(`.${O}`,n),b=e?P(e,n):n,c=L(b,i,!0),l=c[0],h=c[c.length-1],v=o&&!e?0:L(n,i,!0).findIndex(w=>w.isSameNode(o?l:h));return o&&v--,v+1};var ue=({el:e,move:n,cursorPos:r,to:o})=>ie(n)?n*-1:Ae(n,e,o)-r,ae=e=>(se(e)||(e=[e/2,e/2]),e),ce=(e,n)=>Math.abs(Math.random()*(e+n-(e-n))+(e-n));let de=e=>e/2;function Le(e){let{speed:n,deleteSpeed:r,lifeLike:o}=e;return r=r!==null?r:n/3,o?[ce(n,de(n)),ce(r,de(r))]:[n,r]}var Pe=e=>(e.forEach(n=>clearTimeout(n)),[]),$e=()=>Math.random().toString().substring(2,9),W=e=>"value"in e;const De=e=>W(e)?x(e.value):L(e,P(`.${O}`,e),!0);var Re=(e,n)=>{new IntersectionObserver((o,i)=>{o.forEach(b=>{b.isIntersecting&&(n(),i.unobserve(e))})},{threshold:1}).observe(e)};const $=e=>typeof e=="function"?e():e;var Y=e=>e.tagName==="BODY";const G=(e,n)=>{let r=x(P("*",n,!0));return[n].concat(r.reverse()).find(o=>o.cloneNode().isEqualNode(e.cloneNode()))},ke=(e,n)=>{let r=e.nextSibling;return!r||r.isEqualNode(n)},fe=(e,n,r,o)=>{let i=n.content instanceof HTMLElement,b=n.node,c=b==null?void 0:b.parentNode,l=i?n.content:F(n.content);if(W(e)){e.value=`${e.value}${n.content}`;return}if(!i&&c&&!Y(c)){let v=G(c,e);if(v&&ke(v,r))e=v;else{l=c.cloneNode(),l.appendChild(F(n.content));let w=c.parentNode,M=w.cloneNode();if(!Y(w)){let _=G(M,e);for(;!_&&!Y(w);){let q=M;q.innerHTML=l.outerHTML,l=q,w=w.parentNode,M=w.cloneNode(),_=G(M,e)}e=_||e}}}let h=L(e,r,!0)[o-1],T=h?h.parentNode:e;T.insertBefore(l,T.contains(r)?r:null)},xe=(e,n,r)=>Math.min(Math.max(n+e,0),r.length);var Q=e=>e&&e.remove(),Be=(e,n)=>{P("*",e,!0).forEach(r=>{if(!r.innerHTML&&r.tagName!=="BR"&&!r.isSameNode(n)){let o=r;for(;o.parentElement.childNodes.length===1;)o=o.parentElement;Q(o)}})},He=(e,n,r,o)=>{let i=n[o-1];e=(i==null?void 0:i.parentNode)||e,e.insertBefore(r,i||null)};function ze(e){return typeof e=="string"?P(e):e}const Oe=async(e,n,r)=>new Promise(o=>{const i=async()=>{await e(),o()};r.push(setTimeout(i,n))}),Qe={"font-family":"","font-weight":"","font-size":"","font-style":"","line-height":"",color:"","margin-left":"-.125em","margin-right":".125em"},qe=(e,n,r)=>{let i=`${`[${le}='${e}']`} .${O}`,b=getComputedStyle(r),c=Object.entries(Qe).reduce((l,[h,T])=>`${l} ${h}: var(--ti-${h}, ${T||b[h]});`,"");oe(`@keyframes blink-${e} { 0% {opacity: 0} 49% {opacity: 0} 50% {opacity: 1} } ${i} { display: inline; letter-spacing: -1em; ${c} animation: blink-${e} ${n.cursorSpeed/1e3}s infinite; } ${i}.with-delay { animation-delay: 500ms; } ${i}.disabled { animation: none; }`,e)};function je(e,n={}){const r=async(t,s,a=!1)=>{C.frozen&&await new Promise(d=>{this.unfreeze=()=>{C.frozen=!1,d()}}),a||await u.beforeStep(this),await Oe(t,s,Z),a||await u.afterStep(this)},o=()=>W(g),i=t=>Le(u)[t],b=(t,s=0)=>t?i(s):0,c=(t={})=>{let s=t.delay;s&&I.add([[D,s]])},l=(t,s)=>(I.add(t),c(s),this),h=()=>De(g),T=(t={})=>[[X,t],[X,u]],v=t=>{let s=u.nextStringDelay;I.add([[D,s[0]],...t,[D,s[1]]])},w=()=>{if(o())return;let t=z("span");return t.className=O,ee?(t.innerHTML=te(u.cursorChar).innerHTML,t):(t.style.visibility="hidden",t)},M=async()=>{!o()&&g.appendChild(A),!!ee&&qe(me,u,g)},_=t=>{ee&&(A.classList.toggle("disabled",t),A.classList.toggle("with-delay",!t))},q=()=>{let t=u.strings.filter(s=>!!s);t.forEach((s,a)=>{let d=re(s,u.html);if(I.add([[j,{chars:d},R]]),a+1===t.length)return;const f=u.breakLines?[[j,{chars:[B(z("BR"))],silent:!0},R]]:[[H,{num:d.length},R]];v(f)})},Ge=async t=>{N&&await ye({value:N}),I.reset(),I.set(0,[D,t,{}]),await H({num:null})},Je=t=>{let s=g.innerHTML;return s?(g.innerHTML="",u.startDelete?(ne(s).forEach(d=>{fe(g,d,A,N)}),v([[H,{num:null}]]),t):s.trim().split(/<br(?:\s*?)(?:\/)?>/).concat(t)):t},J=async()=>{C.started=!0;let t=I.getItems();try{for(let a=0;a<t.length;a++){let d=t[a],f=d[2];f.freezeCursor&&_(!0),await d[0].call(this,d[1],f),I.setMeta(a,{executed:!0}),_(!1)}if(C.completed=!0,await u.afterComplete(this),!u.loop)throw"";let s=u.loopDelay;r(async()=>{await Ge(s[0]),J()},s[1])}catch{}return this},D=(t=0)=>r(()=>{},t),ye=async({value:t,to:s=K,instant:a=!1})=>{let d=ue({el:g,move:t,cursorPos:N,to:s}),f=()=>{N=xe(d<0?-1:1,N,h()),He(g,h(),A,N)};await r(async()=>{for(let S=0;S<Math.abs(d);S++)a?f():await r(f,i(0))},b(a))},j=({chars:t,instant:s,silent:a})=>r(async()=>{const d=f=>fe(g,f,A,N);a||await u.beforeString(t,this);for(let f=0;f<t.length;f++)s?d(t[f]):await r(()=>{d(t[f])},i(0));a||await u.afterString(t,this)},b(s),!0),X=async t=>{u=k(u,t)},Xe=async()=>{if(o()){g.value="";return}h().forEach(t=>{Q(t)})},H=async({num:t=null,instant:s=!1,to:a=K})=>{await r(async()=>{let d=ie(t)?t:ue({el:g,move:t,cursorPos:N,to:a});const f=()=>{let S=h();!S.length||(o()?g.value=g.value.slice(0,-1):(Q(S[N]),Be(g,A)))};for(let S=0;S<d;S++)s?f():await r(f,i(1))},b(s,1)),t===null&&h().length-1>0&&await H({num:null})};this.break=function(t){const s=B(z("BR"));return l([[j,{chars:[s],silent:!0}]],t)},this.delete=function(t=null,s={}){t=$(t);let a=T(s),d=t,{instant:f,to:S}=s;return l([a[0],[H,{num:d,instant:f,to:S},R],a[1]],s)},this.empty=function(t={}){return l([[Xe]],t)},this.exec=function(t,s){let a=T(s);return l([a[0],[t,null],a[1]],s)},this.move=function(t,s={}){t=$(t);let a=T(s),{instant:d,to:f}=s,S={value:t===null?"":t,to:f,instant:d};return l([a[0],[ye,S,R],a[1]],s)},this.options=function(t){return t=$(t),l([[X,t]],t)},this.pause=function(t,s={}){return l([[D,$(t)]],s)},this.type=function(t,s={}){t=$(t);let a=T(s),d=re(t,u.html),{instant:f}=s,S=[a[0],[j,{chars:d,instant:f},R],a[1]];return l(S,s)},this.is=function(t){return C[t]},this.destroy=function(t=!0){Z=Pe(Z),$(t)&&Q(A),C.destroyed=!0},this.freeze=function(){C.frozen=!0},this.unfreeze=function(){},this.reset=function(){!this.is("destroyed")&&this.destroy(),I.reset(),N=0;for(let t in C)C[t]=!1;return g[o()?"value":"innerHTML"]="",this},this.go=function(){return C.started?this:(M(),u.waitUntilVisible?(Re(g,J.bind(this)),this):(J(),this))},this.getQueue=function(){return I},this.getOptions=function(){return u},this.getElement=function(){return g};let g=ze(e),Z=[],N=0,R={freezeCursor:!0},C=k({},Ie),u=k(Me,n);u=k(u,{html:!o()&&u.html,nextStringDelay:ae(u.nextStringDelay),loopDelay:ae(u.loopDelay)});let me=$e(),I=_e([[D,u.startDelay]]);g.dataset.typeitId=me,oe(`[${le}]:before {content: '.'; display: inline-block; width: 0; visibility: hidden;}`);let ee=u.cursor&&!o(),A=w();u.strings=Je(Ne(u.strings)),u.strings.length&&q()}const Ue=["area","base","br","col","embed","hr","img","input","link","meta","param","source","track","wbr"];var Ve=e=>Ue.indexOf(e.toLowerCase())>-1;const{useRef:Fe,useEffect:pe,useState:Ke,useMemo:We}=m,Ye={as:"span",options:{},getBeforeInit:e=>e,getAfterInit:e=>e},he=e=>{const[n,r]=Ke(!0),o=Fe(null),M=e,{options:i,as:b,children:c,getBeforeInit:l,getAfterInit:h}=M,T=Se(M,["options","as","children","getBeforeInit","getAfterInit"]),v=b,w=We(()=>Ve(v),[v]);return pe(()=>{c&&(i.strings=o.current.innerHTML),r(!1)},[]),pe(()=>{if(n)return;let _=new je(o.current,V({},i));return _=l(_),_.go(),_=h(_),()=>{_.destroy()}},[n]),m.createElement("div",{style:{opacity:n?0:1}},w?m.createElement(v,V({ref:o},T)):m.createElement(v,V({ref:o},T),n&&c))};return he.defaultProps=Ye,he});
{
"name": "typeit-react",
"version": "2.0.4",
"version": "2.0.5",
"description": "React component for the most versatile JavaScript animated typing utility on the planet.",
"homepage": "https://typeitjs.com",
"main": "dist/index.umd.js",
"module": "dist/index.esm.js",
"module": "dist/index.es.js",
"types": "dist/index.d.ts",
"scripts": {
"build": "microbundle -i src/index.tsx -o dist/index.js --name TypeIt --no-sourcemap --jsx React.createElement && scripts/banner",
"watch": "microbundle -i src/index.tsx -o dist/index.js --name TypeIt --format umd --no-sourcemap --jsx React.createElement watch",
"build": "vite build && tsc",
"start": "vite serve examples",
"prettier": "prettier --write \"**/*.{md,js}\"",
"test": "echo \"Error: no test specified\" && exit 1",
"prepare": "husky install"
"test": "echo \"Error: no test specified\" && exit 0"
},

@@ -40,20 +39,14 @@ "files": [

"dependencies": {
"@types/react": "^17.0.32"
},
"peerDependencies": {
"@types/react": "^17.0.32",
"react": "^17.0.2",
"react-dom": "^17.0.2"
"react-dom": "^17.0.2",
"typeit": "^8.0.5",
"vite": "^2.6.10"
},
"devDependencies": {
"@babel/preset-typescript": "^7.15.0",
"husky": "^7.0.4",
"lint-staged": "^11.2.4",
"microbundle": "^0.14.1",
"prettier": "^2.4.1",
"typeit": "^8.0.4",
"typescript": "^4.4.4"
},
"lint-staged": {
"*.{js,css,md}": "prettier --write"
}
"gitHead": "28ef6deb4e0fb7a040a44ab880e30d2d019e91d3"
}
# TypeIt - React
The official React component for [TypeIt](https://github.com/alexmacarthur/typeit), the most versatile JavaScript animated typing utility on the planet. You can use it to bring dynamic typewriter effects to your React applications.
The official React component for [TypeIt](https://typeitjs.com), the most versatile JavaScript animated typing utility on the planet. You can use it to bring dynamic typewriter effects to your React applications.

@@ -5,0 +5,0 @@ ## License Options

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