New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-type-animation

Package Overview
Dependencies
Maintainers
1
Versions
31
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-type-animation - npm Package Compare versions

Comparing version 2.1.2 to 3.0.0

dist/cjs/components/TypeAnimation/index.types.d.ts
dist/cjs/hooks/useForwardRef.d.ts
dist/esm/components/TypeAnimation/index.types.d.ts
dist/esm/hooks/useForwardRef.d.ts

13

dist/cjs/components/TypeAnimation/index.d.ts
import React from 'react';
declare type Speed = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99;
interface TypeAnimationProps {
sequence: Array<string | number | ((element: HTMLElement | null) => void | Promise<void>)>;
repeat?: number;
wrapper?: 'p' | 'div' | 'span' | 'strong' | 'a' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'aside' | 'b';
cursor?: boolean;
speed?: Speed;
deletionSpeed?: Speed;
omitDeletionAnimation?: boolean;
}
declare const _default: React.NamedExoticComponent<TypeAnimationProps & React.HtmlHTMLAttributes<CSSStyleDeclaration>>;
import { TypeAnimationProps } from './index.types';
declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<TypeAnimationProps & React.HTMLAttributes<HTMLElement | HTMLParagraphElement | HTMLDivElement | HTMLSpanElement | HTMLAnchorElement | HTMLHeadingElement>, "style" | "sequence" | "repeat" | "wrapper" | "cursor" | "speed" | "deletionSpeed" | "omitDeletionAnimation" | "className" | "manifest" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLElement | HTMLParagraphElement | HTMLDivElement | HTMLSpanElement | HTMLAnchorElement | HTMLHeadingElement>>>;
export default _default;

3

dist/cjs/index.js

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

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e);function r(e,t,n,r){return new(n||(n=Promise))((function(u,o){function a(e){try{i(r.next(e))}catch(e){o(e)}}function c(e){try{i(r.throw(e))}catch(e){o(e)}}function i(e){var t;e.done?u(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(a,c)}i((r=r.apply(e,t||[])).next())}))}function u(e,t){var n,r,u,o,a={label:0,sent:function(){if(1&u[0])throw u[1];return u[1]},trys:[],ops:[]};return o={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function c(o){return function(c){return function(o){if(n)throw new TypeError("Generator is already executing.");for(;a;)try{if(n=1,r&&(u=2&o[0]?r.return:o[0]?r.throw||((u=r.return)&&u.call(r),0):r.next)&&!(u=u.call(r,o[1])).done)return u;switch(r=0,u&&(o=[2&o[0],u.value]),o[0]){case 0:case 1:u=o;break;case 4:return a.label++,{value:o[1],done:!1};case 5:a.label++,r=o[1],o=[0];continue;case 7:o=a.ops.pop(),a.trys.pop();continue;default:if(!(u=a.trys,(u=u.length>0&&u[u.length-1])||6!==o[0]&&2!==o[0])){a=0;continue}if(3===o[0]&&(!u||o[1]>u[0]&&o[1]<u[3])){a.label=o[1];break}if(6===o[0]&&a.label<u[1]){a.label=u[1],u=o;break}if(u&&a.label<u[2]){a.label=u[2],a.ops.push(o);break}u[2]&&a.ops.pop(),a.trys.pop();continue}o=t.call(e,a)}catch(e){o=[6,e],r=0}finally{n=u=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}([o,c])}}}function o(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],r=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function a(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,u,o=n.call(e),a=[];try{for(;(void 0===t||t-- >0)&&!(r=o.next()).done;)a.push(r.value)}catch(e){u={error:e}}finally{try{r&&!r.done&&(n=o.return)&&n.call(o)}finally{if(u)throw u.error}}return a}function c(e,t,n){if(n||2===arguments.length)for(var r,u=0,o=t.length;u<o;u++)!r&&u in t||(r||(r=Array.prototype.slice.call(t,0,u)),r[u]=t[u]);return e.concat(r||Array.prototype.slice.call(t))}function i(e,t,n,i){for(var f=[],d=4;d<arguments.length;d++)f[d-4]=arguments[d];return r(this,void 0,void 0,(function(){var r,d,h,p,y,v;return u(this,(function(u){switch(u.label){case 0:u.trys.push([0,12,13,14]),r=o(f),d=r.next(),u.label=1;case 1:if(d.done)return[3,11];switch(h=d.value,typeof h){case"string":return[3,2];case"number":return[3,4];case"function":return[3,6]}return[3,8];case 2:return[4,s(e,h,t,n,i)];case 3:return u.sent(),[3,10];case 4:return[4,l(h)];case 5:return u.sent(),[3,10];case 6:return[4,h.apply(void 0,c([e,t,n,i],a(f),!1))];case 7:return u.sent(),[3,10];case 8:return[4,h];case 9:u.sent(),u.label=10;case 10:return d=r.next(),[3,1];case 11:return[3,14];case 12:return p=u.sent(),y={error:p},[3,14];case 13:try{d&&!d.done&&(v=r.return)&&v.call(r)}finally{if(y)throw y.error}return[7];case 14:return[2]}}))}))}function s(e,t,n,o,i){return r(this,void 0,void 0,(function(){var r;return u(this,(function(u){switch(u.label){case 0:return r=function(e,t){var n=a(t).slice(0);return c(c([],a(e),!1),[NaN],!1).findIndex((function(e,t){return n[t]!==e}))}(e.textContent,t),[4,f(e,c(c([],a(h(e.textContent,r)),!1),a(d(t,r)),!1),n,o,i)];case 1:return u.sent(),[2]}}))}))}function l(e){return r(this,void 0,void 0,(function(){return u(this,(function(t){switch(t.label){case 0:return[4,new Promise((function(t){return setTimeout(t,e)}))];case 1:return t.sent(),[2]}}))}))}function f(e,t,n,a,c){return r(this,void 0,void 0,(function(){var r,i,s,f,d,h,p,y,v,b,m,w;return u(this,(function(x){switch(x.label){case 0:if(r=t,c){for(i=0,s=1;s<t.length;s++)if(f=t[s-1],(d=t[s]).length>f.length||""===d){i=s;break}r=t.slice(i,t.length)}x.label=1;case 1:x.trys.push([1,6,7,8]),h=o(function(e){var t,n,r,a,c,i,s;return u(this,(function(l){switch(l.label){case 0:t=function(e){return u(this,(function(t){switch(t.label){case 0:return[4,{op:function(t){return requestAnimationFrame((function(){return t.textContent=e}))},opCode:function(t){return""===e||t.textContent.length>e.length?"DELETE":"WRITING"}}];case 1:return t.sent(),[2]}}))},l.label=1;case 1:l.trys.push([1,6,7,8]),n=o(e),r=n.next(),l.label=2;case 2:return r.done?[3,5]:(a=r.value,[5,t(a)]);case 3:l.sent(),l.label=4;case 4:return r=n.next(),[3,2];case 5:return[3,8];case 6:return c=l.sent(),i={error:c},[3,8];case 7:try{r&&!r.done&&(s=n.return)&&s.call(n)}finally{if(i)throw i.error}return[7];case 8:return[2]}}))}(r)),p=h.next(),x.label=2;case 2:return p.done?[3,5]:(y=p.value,v="WRITING"===y.opCode(e)?n+n*(Math.random()-.5):a+a*(Math.random()-.5),y.op(e),[4,l(v)]);case 3:x.sent(),x.label=4;case 4:return p=h.next(),[3,2];case 5:return[3,8];case 6:return b=x.sent(),m={error:b},[3,8];case 7:try{p&&!p.done&&(w=h.return)&&w.call(h)}finally{if(m)throw m.error}return[7];case 8:return[2]}}))}))}function d(e,t,n){var r=a(e).slice(0);return void 0===t&&(t=0),void 0===n&&(n=r.length),u(this,(function(e){switch(e.label){case 0:return t<n?[4,r.slice(0,++t).join("")]:[3,2];case 1:return e.sent(),[3,0];case 2:return[2]}}))}function h(e,t,n){var r=a(e).slice(0);return void 0===t&&(t=0),void 0===n&&(n=r.length),u(this,(function(e){switch(e.label){case 0:return n>t?[4,r.slice(0,--n).join("")]:[3,2];case 1:return e.sent(),[3,0];case 2:return[2]}}))}var p="index-module_type__E-SaG";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],u=document.createElement("style");u.type="text/css","top"===n&&r.firstChild?r.insertBefore(u,r.firstChild):r.appendChild(u),u.styleSheet?u.styleSheet.cssText=e:u.appendChild(document.createTextNode(e))}}(".index-module_type__E-SaG::after {\n content: '|';\n animation: index-module_cursor__PQg0P 1.1s infinite step-start;\n}\n\n@keyframes index-module_cursor__PQg0P {\n 50% {\n opacity: 0;\n }\n}\n");var y=e.memo((function(t){var r=t.sequence,u=t.repeat,o=t.className,s=t.speed,l=void 0===s?40:s,f=t.deletionSpeed,d=t.omitDeletionAnimation,h=void 0!==d&&d,y=t.wrapper,v=void 0===y?"div":y,b=t.cursor,m=void 0===b||b,w=t.style;l=Math.abs(l-100),f=f?Math.abs(f-100):l;var x,g,_,S,E,C,T,N=e.useRef(null),A=p;x=o&&o.length>0?m?"".concat(A," ").concat(o):o:m?A:"",g=function(){return u===1/0?i.apply(void 0,c(c([N.current,l,f,h],a(r),!1),[i],!1)):"number"==typeof u?i.apply(void 0,c([N.current,l,f,h],a(Array(1+u).fill(r).flat()),!1)):i.apply(void 0,c([N.current,l,f,h],a(r),!1)),function(){N.current}},_=e.useRef(g),S=e.useRef(),E=e.useRef(!1),C=e.useRef(!1),T=a(e.useState(0),2)[1],E.current&&(C.current=!0),e.useEffect((function(){return E.current||(S.current=_.current(),E.current=!0),T((function(e){return e+1})),function(){C.current&&S.current&&S.current()}}),[]);var P=v;return n.default.createElement(P,{style:w,className:x,ref:N})}),(function(e,t){return!0}));exports.TypeAnimation=y;
//# sourceMappingURL=index.js.map
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e);function r(e,t,n,r){return new(n||(n=Promise))((function(u,o){function a(e){try{i(r.next(e))}catch(e){o(e)}}function c(e){try{i(r.throw(e))}catch(e){o(e)}}function i(e){var t;e.done?u(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(a,c)}i((r=r.apply(e,t||[])).next())}))}function u(e,t){var n,r,u,o,a={label:0,sent:function(){if(1&u[0])throw u[1];return u[1]},trys:[],ops:[]};return o={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function c(o){return function(c){return function(o){if(n)throw new TypeError("Generator is already executing.");for(;a;)try{if(n=1,r&&(u=2&o[0]?r.return:o[0]?r.throw||((u=r.return)&&u.call(r),0):r.next)&&!(u=u.call(r,o[1])).done)return u;switch(r=0,u&&(o=[2&o[0],u.value]),o[0]){case 0:case 1:u=o;break;case 4:return a.label++,{value:o[1],done:!1};case 5:a.label++,r=o[1],o=[0];continue;case 7:o=a.ops.pop(),a.trys.pop();continue;default:if(!(u=a.trys,(u=u.length>0&&u[u.length-1])||6!==o[0]&&2!==o[0])){a=0;continue}if(3===o[0]&&(!u||o[1]>u[0]&&o[1]<u[3])){a.label=o[1];break}if(6===o[0]&&a.label<u[1]){a.label=u[1],u=o;break}if(u&&a.label<u[2]){a.label=u[2],a.ops.push(o);break}u[2]&&a.ops.pop(),a.trys.pop();continue}o=t.call(e,a)}catch(e){o=[6,e],r=0}finally{n=u=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}([o,c])}}}function o(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],r=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function a(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,u,o=n.call(e),a=[];try{for(;(void 0===t||t-- >0)&&!(r=o.next()).done;)a.push(r.value)}catch(e){u={error:e}}finally{try{r&&!r.done&&(n=o.return)&&n.call(o)}finally{if(u)throw u.error}}return a}function c(e,t,n){if(n||2===arguments.length)for(var r,u=0,o=t.length;u<o;u++)!r&&u in t||(r||(r=Array.prototype.slice.call(t,0,u)),r[u]=t[u]);return e.concat(r||Array.prototype.slice.call(t))}function i(e,t,n,i){for(var f=[],d=4;d<arguments.length;d++)f[d-4]=arguments[d];return r(this,void 0,void 0,(function(){var r,d,h,y,p,v;return u(this,(function(u){switch(u.label){case 0:u.trys.push([0,12,13,14]),r=o(f),d=r.next(),u.label=1;case 1:if(d.done)return[3,11];switch(h=d.value,typeof h){case"string":return[3,2];case"number":return[3,4];case"function":return[3,6]}return[3,8];case 2:return[4,s(e,h,t,n,i)];case 3:return u.sent(),[3,10];case 4:return[4,l(h)];case 5:return u.sent(),[3,10];case 6:return[4,h.apply(void 0,c([e,t,n,i],a(f),!1))];case 7:return u.sent(),[3,10];case 8:return[4,h];case 9:u.sent(),u.label=10;case 10:return d=r.next(),[3,1];case 11:return[3,14];case 12:return y=u.sent(),p={error:y},[3,14];case 13:try{d&&!d.done&&(v=r.return)&&v.call(r)}finally{if(p)throw p.error}return[7];case 14:return[2]}}))}))}function s(e,t,n,o,i){return r(this,void 0,void 0,(function(){var r;return u(this,(function(u){switch(u.label){case 0:return r=function(e,t){var n=a(t).slice(0);return c(c([],a(e),!1),[NaN],!1).findIndex((function(e,t){return n[t]!==e}))}(e.textContent,t),[4,f(e,c(c([],a(h(e.textContent,r)),!1),a(d(t,r)),!1),n,o,i)];case 1:return u.sent(),[2]}}))}))}function l(e){return r(this,void 0,void 0,(function(){return u(this,(function(t){switch(t.label){case 0:return[4,new Promise((function(t){return setTimeout(t,e)}))];case 1:return t.sent(),[2]}}))}))}function f(e,t,n,c,i){return r(this,void 0,void 0,(function(){var r,s,f,d,h,y,p,v,b,m,w,x,g;return u(this,(function(S){switch(S.label){case 0:if(r=t,i){for(s=0,f=1;f<t.length;f++)if(d=a([t[f-1],t[f]],2),h=d[0],(y=d[1]).length>h.length||""===y){s=f;break}r=t.slice(s,t.length)}S.label=1;case 1:S.trys.push([1,6,7,8]),p=o(function(e){var t,n,r,a,c,i,s;return u(this,(function(l){switch(l.label){case 0:t=function(e){return u(this,(function(t){switch(t.label){case 0:return[4,{op:function(t){return requestAnimationFrame((function(){return t.textContent=e}))},opCode:function(t){return""===e||t.textContent.length>e.length?"DELETE":"WRITING"}}];case 1:return t.sent(),[2]}}))},l.label=1;case 1:l.trys.push([1,6,7,8]),n=o(e),r=n.next(),l.label=2;case 2:return r.done?[3,5]:(a=r.value,[5,t(a)]);case 3:l.sent(),l.label=4;case 4:return r=n.next(),[3,2];case 5:return[3,8];case 6:return c=l.sent(),i={error:c},[3,8];case 7:try{r&&!r.done&&(s=n.return)&&s.call(n)}finally{if(i)throw i.error}return[7];case 8:return[2]}}))}(r)),v=p.next(),S.label=2;case 2:return v.done?[3,5]:(b=v.value,m="WRITING"===b.opCode(e)?n+n*(Math.random()-.5):c+c*(Math.random()-.5),b.op(e),[4,l(m)]);case 3:S.sent(),S.label=4;case 4:return v=p.next(),[3,2];case 5:return[3,8];case 6:return w=S.sent(),x={error:w},[3,8];case 7:try{v&&!v.done&&(g=p.return)&&g.call(p)}finally{if(x)throw x.error}return[7];case 8:return[2]}}))}))}function d(e,t,n){var r=a(e).slice(0);return void 0===t&&(t=0),void 0===n&&(n=r.length),u(this,(function(e){switch(e.label){case 0:return t<n?[4,r.slice(0,++t).join("")]:[3,2];case 1:return e.sent(),[3,0];case 2:return[2]}}))}function h(e,t,n){var r=a(e).slice(0);return void 0===t&&(t=0),void 0===n&&(n=r.length),u(this,(function(e){switch(e.label){case 0:return n>t?[4,r.slice(0,--n).join("")]:[3,2];case 1:return e.sent(),[3,0];case 2:return[2]}}))}var y="index-module_type__E-SaG";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],u=document.createElement("style");u.type="text/css","top"===n&&r.firstChild?r.insertBefore(u,r.firstChild):r.appendChild(u),u.styleSheet?u.styleSheet.cssText=e:u.appendChild(document.createTextNode(e))}}(".index-module_type__E-SaG::after {\n content: '|';\n animation: index-module_cursor__PQg0P 1.1s infinite step-start;\n}\n\n@keyframes index-module_cursor__PQg0P {\n 50% {\n opacity: 0;\n }\n}\n");var p=e.forwardRef((function(t,r){var u=t.sequence,o=t.repeat,s=t.className,l=t.speed,f=void 0===l?40:l,d=t.deletionSpeed,h=t.omitDeletionAnimation,p=void 0!==h&&h,v=t.wrapper,b=void 0===v?"span":v,m=t.cursor,w=void 0===m||m,x=t.style;d||(d=f);var g=new Array(2).fill(40);[f,d].forEach((function(e,t){switch(typeof e){case"number":g[t]=Math.abs(e-100);break;case"object":var n=e,r=n.type,u=n.value;if("number"!=typeof u)break;if("keyStrokeDelayInMs"===r)g[t]=u}}));var S,_,E,k,C,T,A,N=g[0],R=g[1],P=function(t,n){void 0===n&&(n=null);var r=e.useRef(n);return e.useEffect((function(){t&&("function"==typeof t?t(r.current):t.current=r.current)}),[t]),r}(r),j=y;S=s?"".concat(w?j+" ":"").concat(s):w?j:"",_=function(){var e,t=u;return o===1/0?e=i:"number"==typeof o&&(t=Array(1+o).fill(u).flat()),i.apply(void 0,c(c([P.current,N,R,p],a(t),!1),[e],!1)),function(){P.current}},E=e.useRef(_),k=e.useRef(),C=e.useRef(!1),T=e.useRef(!1),A=a(e.useState(0),2)[1],C.current&&(T.current=!0),e.useEffect((function(){return C.current||(k.current=E.current(),C.current=!0),A((function(e){return e+1})),function(){T.current&&k.current&&k.current()}}),[]);var I=b;return n.default.createElement(I,{style:x,className:S,ref:P})})),v=e.memo(p,(function(e,t){return!0}));exports.TypeAnimation=v;

13

dist/esm/components/TypeAnimation/index.d.ts
import React from 'react';
declare type Speed = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99;
interface TypeAnimationProps {
sequence: Array<string | number | ((element: HTMLElement | null) => void | Promise<void>)>;
repeat?: number;
wrapper?: 'p' | 'div' | 'span' | 'strong' | 'a' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'aside' | 'b';
cursor?: boolean;
speed?: Speed;
deletionSpeed?: Speed;
omitDeletionAnimation?: boolean;
}
declare const _default: React.NamedExoticComponent<TypeAnimationProps & React.HtmlHTMLAttributes<CSSStyleDeclaration>>;
import { TypeAnimationProps } from './index.types';
declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<TypeAnimationProps & React.HTMLAttributes<HTMLElement | HTMLParagraphElement | HTMLDivElement | HTMLSpanElement | HTMLAnchorElement | HTMLHeadingElement>, "style" | "sequence" | "repeat" | "wrapper" | "cursor" | "speed" | "deletionSpeed" | "omitDeletionAnimation" | "className" | "manifest" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLElement | HTMLParagraphElement | HTMLDivElement | HTMLSpanElement | HTMLAnchorElement | HTMLHeadingElement>>>;
export default _default;

3

dist/esm/index.es.js

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

import e,{useRef as t,useState as n,useEffect as r,memo as o}from"react";function a(e,t,n,r){return new(n||(n=Promise))((function(o,a){function u(e){try{i(r.next(e))}catch(e){a(e)}}function c(e){try{i(r.throw(e))}catch(e){a(e)}}function i(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(u,c)}i((r=r.apply(e,t||[])).next())}))}function u(e,t){var n,r,o,a,u={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return a={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function c(a){return function(c){return function(a){if(n)throw new TypeError("Generator is already executing.");for(;u;)try{if(n=1,r&&(o=2&a[0]?r.return:a[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,a[1])).done)return o;switch(r=0,o&&(a=[2&a[0],o.value]),a[0]){case 0:case 1:o=a;break;case 4:return u.label++,{value:a[1],done:!1};case 5:u.label++,r=a[1],a=[0];continue;case 7:a=u.ops.pop(),u.trys.pop();continue;default:if(!(o=u.trys,(o=o.length>0&&o[o.length-1])||6!==a[0]&&2!==a[0])){u=0;continue}if(3===a[0]&&(!o||a[1]>o[0]&&a[1]<o[3])){u.label=a[1];break}if(6===a[0]&&u.label<o[1]){u.label=o[1],o=a;break}if(o&&u.label<o[2]){u.label=o[2],u.ops.push(a);break}o[2]&&u.ops.pop(),u.trys.pop();continue}a=t.call(e,u)}catch(e){a=[6,e],r=0}finally{n=o=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,c])}}}function c(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],r=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function i(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,o,a=n.call(e),u=[];try{for(;(void 0===t||t-- >0)&&!(r=a.next()).done;)u.push(r.value)}catch(e){o={error:e}}finally{try{r&&!r.done&&(n=a.return)&&n.call(a)}finally{if(o)throw o.error}}return u}function l(e,t,n){if(n||2===arguments.length)for(var r,o=0,a=t.length;o<a;o++)!r&&o in t||(r||(r=Array.prototype.slice.call(t,0,o)),r[o]=t[o]);return e.concat(r||Array.prototype.slice.call(t))}function s(e,t,n,r){for(var o=[],s=4;s<arguments.length;s++)o[s-4]=arguments[s];return a(this,void 0,void 0,(function(){var a,s,h,p,y,v;return u(this,(function(u){switch(u.label){case 0:u.trys.push([0,12,13,14]),a=c(o),s=a.next(),u.label=1;case 1:if(s.done)return[3,11];switch(h=s.value,typeof h){case"string":return[3,2];case"number":return[3,4];case"function":return[3,6]}return[3,8];case 2:return[4,f(e,h,t,n,r)];case 3:return u.sent(),[3,10];case 4:return[4,d(h)];case 5:return u.sent(),[3,10];case 6:return[4,h.apply(void 0,l([e,t,n,r],i(o),!1))];case 7:return u.sent(),[3,10];case 8:return[4,h];case 9:u.sent(),u.label=10;case 10:return s=a.next(),[3,1];case 11:return[3,14];case 12:return p=u.sent(),y={error:p},[3,14];case 13:try{s&&!s.done&&(v=a.return)&&v.call(a)}finally{if(y)throw y.error}return[7];case 14:return[2]}}))}))}function f(e,t,n,r,o){return a(this,void 0,void 0,(function(){var a;return u(this,(function(u){switch(u.label){case 0:return a=function(e,t){var n=i(t).slice(0);return l(l([],i(e),!1),[NaN],!1).findIndex((function(e,t){return n[t]!==e}))}(e.textContent,t),[4,h(e,l(l([],i(y(e.textContent,a)),!1),i(p(t,a)),!1),n,r,o)];case 1:return u.sent(),[2]}}))}))}function d(e){return a(this,void 0,void 0,(function(){return u(this,(function(t){switch(t.label){case 0:return[4,new Promise((function(t){return setTimeout(t,e)}))];case 1:return t.sent(),[2]}}))}))}function h(e,t,n,r,o){return a(this,void 0,void 0,(function(){var a,i,l,s,f,h,p,y,v,b,m,w;return u(this,(function(x){switch(x.label){case 0:if(a=t,o){for(i=0,l=1;l<t.length;l++)if(s=t[l-1],(f=t[l]).length>s.length||""===f){i=l;break}a=t.slice(i,t.length)}x.label=1;case 1:x.trys.push([1,6,7,8]),h=c(function(e){var t,n,r,o,a,i,l;return u(this,(function(s){switch(s.label){case 0:t=function(e){return u(this,(function(t){switch(t.label){case 0:return[4,{op:function(t){return requestAnimationFrame((function(){return t.textContent=e}))},opCode:function(t){return""===e||t.textContent.length>e.length?"DELETE":"WRITING"}}];case 1:return t.sent(),[2]}}))},s.label=1;case 1:s.trys.push([1,6,7,8]),n=c(e),r=n.next(),s.label=2;case 2:return r.done?[3,5]:(o=r.value,[5,t(o)]);case 3:s.sent(),s.label=4;case 4:return r=n.next(),[3,2];case 5:return[3,8];case 6:return a=s.sent(),i={error:a},[3,8];case 7:try{r&&!r.done&&(l=n.return)&&l.call(n)}finally{if(i)throw i.error}return[7];case 8:return[2]}}))}(a)),p=h.next(),x.label=2;case 2:return p.done?[3,5]:(y=p.value,v="WRITING"===y.opCode(e)?n+n*(Math.random()-.5):r+r*(Math.random()-.5),y.op(e),[4,d(v)]);case 3:x.sent(),x.label=4;case 4:return p=h.next(),[3,2];case 5:return[3,8];case 6:return b=x.sent(),m={error:b},[3,8];case 7:try{p&&!p.done&&(w=h.return)&&w.call(h)}finally{if(m)throw m.error}return[7];case 8:return[2]}}))}))}function p(e,t,n){var r=i(e).slice(0);return void 0===t&&(t=0),void 0===n&&(n=r.length),u(this,(function(e){switch(e.label){case 0:return t<n?[4,r.slice(0,++t).join("")]:[3,2];case 1:return e.sent(),[3,0];case 2:return[2]}}))}function y(e,t,n){var r=i(e).slice(0);return void 0===t&&(t=0),void 0===n&&(n=r.length),u(this,(function(e){switch(e.label){case 0:return n>t?[4,r.slice(0,--n).join("")]:[3,2];case 1:return e.sent(),[3,0];case 2:return[2]}}))}var v="index-module_type__E-SaG";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".index-module_type__E-SaG::after {\n content: '|';\n animation: index-module_cursor__PQg0P 1.1s infinite step-start;\n}\n\n@keyframes index-module_cursor__PQg0P {\n 50% {\n opacity: 0;\n }\n}\n");var b=o((function(o){var a=o.sequence,u=o.repeat,c=o.className,f=o.speed,d=void 0===f?40:f,h=o.deletionSpeed,p=o.omitDeletionAnimation,y=void 0!==p&&p,b=o.wrapper,m=void 0===b?"div":b,w=o.cursor,x=void 0===w||w,g=o.style;d=Math.abs(d-100),h=h?Math.abs(h-100):d;var S,_,C,E,T,N,A=t(null),k=v;S=c&&c.length>0?x?"".concat(k," ").concat(c):c:x?k:"",_=t((function(){return u===1/0?s.apply(void 0,l(l([A.current,d,h,y],i(a),!1),[s],!1)):"number"==typeof u?s.apply(void 0,l([A.current,d,h,y],i(Array(1+u).fill(a).flat()),!1)):s.apply(void 0,l([A.current,d,h,y],i(a),!1)),function(){A.current}})),C=t(),E=t(!1),T=t(!1),N=i(n(0),2)[1],E.current&&(T.current=!0),r((function(){return E.current||(C.current=_.current(),E.current=!0),N((function(e){return e+1})),function(){T.current&&C.current&&C.current()}}),[]);var P=m;return e.createElement(P,{style:g,className:S,ref:A})}),(function(e,t){return!0}));export{b as TypeAnimation};
//# sourceMappingURL=index.es.js.map
import e,{useRef as t,useState as n,useEffect as r,forwardRef as o,memo as a}from"react";function u(e,t,n,r){return new(n||(n=Promise))((function(o,a){function u(e){try{i(r.next(e))}catch(e){a(e)}}function c(e){try{i(r.throw(e))}catch(e){a(e)}}function i(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(u,c)}i((r=r.apply(e,t||[])).next())}))}function c(e,t){var n,r,o,a,u={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return a={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function c(a){return function(c){return function(a){if(n)throw new TypeError("Generator is already executing.");for(;u;)try{if(n=1,r&&(o=2&a[0]?r.return:a[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,a[1])).done)return o;switch(r=0,o&&(a=[2&a[0],o.value]),a[0]){case 0:case 1:o=a;break;case 4:return u.label++,{value:a[1],done:!1};case 5:u.label++,r=a[1],a=[0];continue;case 7:a=u.ops.pop(),u.trys.pop();continue;default:if(!(o=u.trys,(o=o.length>0&&o[o.length-1])||6!==a[0]&&2!==a[0])){u=0;continue}if(3===a[0]&&(!o||a[1]>o[0]&&a[1]<o[3])){u.label=a[1];break}if(6===a[0]&&u.label<o[1]){u.label=o[1],o=a;break}if(o&&u.label<o[2]){u.label=o[2],u.ops.push(a);break}o[2]&&u.ops.pop(),u.trys.pop();continue}a=t.call(e,u)}catch(e){a=[6,e],r=0}finally{n=o=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,c])}}}function i(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],r=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function s(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,o,a=n.call(e),u=[];try{for(;(void 0===t||t-- >0)&&!(r=a.next()).done;)u.push(r.value)}catch(e){o={error:e}}finally{try{r&&!r.done&&(n=a.return)&&n.call(a)}finally{if(o)throw o.error}}return u}function l(e,t,n){if(n||2===arguments.length)for(var r,o=0,a=t.length;o<a;o++)!r&&o in t||(r||(r=Array.prototype.slice.call(t,0,o)),r[o]=t[o]);return e.concat(r||Array.prototype.slice.call(t))}function f(e,t,n,r){for(var o=[],a=4;a<arguments.length;a++)o[a-4]=arguments[a];return u(this,void 0,void 0,(function(){var a,u,f,y,p,v;return c(this,(function(c){switch(c.label){case 0:c.trys.push([0,12,13,14]),a=i(o),u=a.next(),c.label=1;case 1:if(u.done)return[3,11];switch(f=u.value,typeof f){case"string":return[3,2];case"number":return[3,4];case"function":return[3,6]}return[3,8];case 2:return[4,d(e,f,t,n,r)];case 3:return c.sent(),[3,10];case 4:return[4,h(f)];case 5:return c.sent(),[3,10];case 6:return[4,f.apply(void 0,l([e,t,n,r],s(o),!1))];case 7:return c.sent(),[3,10];case 8:return[4,f];case 9:c.sent(),c.label=10;case 10:return u=a.next(),[3,1];case 11:return[3,14];case 12:return y=c.sent(),p={error:y},[3,14];case 13:try{u&&!u.done&&(v=a.return)&&v.call(a)}finally{if(p)throw p.error}return[7];case 14:return[2]}}))}))}function d(e,t,n,r,o){return u(this,void 0,void 0,(function(){var a;return c(this,(function(u){switch(u.label){case 0:return a=function(e,t){var n=s(t).slice(0);return l(l([],s(e),!1),[NaN],!1).findIndex((function(e,t){return n[t]!==e}))}(e.textContent,t),[4,y(e,l(l([],s(v(e.textContent,a)),!1),s(p(t,a)),!1),n,r,o)];case 1:return u.sent(),[2]}}))}))}function h(e){return u(this,void 0,void 0,(function(){return c(this,(function(t){switch(t.label){case 0:return[4,new Promise((function(t){return setTimeout(t,e)}))];case 1:return t.sent(),[2]}}))}))}function y(e,t,n,r,o){return u(this,void 0,void 0,(function(){var a,u,l,f,d,y,p,v,b,m,w,x,g;return c(this,(function(S){switch(S.label){case 0:if(a=t,o){for(u=0,l=1;l<t.length;l++)if(f=s([t[l-1],t[l]],2),d=f[0],(y=f[1]).length>d.length||""===y){u=l;break}a=t.slice(u,t.length)}S.label=1;case 1:S.trys.push([1,6,7,8]),p=i(function(e){var t,n,r,o,a,u,s;return c(this,(function(l){switch(l.label){case 0:t=function(e){return c(this,(function(t){switch(t.label){case 0:return[4,{op:function(t){return requestAnimationFrame((function(){return t.textContent=e}))},opCode:function(t){return""===e||t.textContent.length>e.length?"DELETE":"WRITING"}}];case 1:return t.sent(),[2]}}))},l.label=1;case 1:l.trys.push([1,6,7,8]),n=i(e),r=n.next(),l.label=2;case 2:return r.done?[3,5]:(o=r.value,[5,t(o)]);case 3:l.sent(),l.label=4;case 4:return r=n.next(),[3,2];case 5:return[3,8];case 6:return a=l.sent(),u={error:a},[3,8];case 7:try{r&&!r.done&&(s=n.return)&&s.call(n)}finally{if(u)throw u.error}return[7];case 8:return[2]}}))}(a)),v=p.next(),S.label=2;case 2:return v.done?[3,5]:(b=v.value,m="WRITING"===b.opCode(e)?n+n*(Math.random()-.5):r+r*(Math.random()-.5),b.op(e),[4,h(m)]);case 3:S.sent(),S.label=4;case 4:return v=p.next(),[3,2];case 5:return[3,8];case 6:return w=S.sent(),x={error:w},[3,8];case 7:try{v&&!v.done&&(g=p.return)&&g.call(p)}finally{if(x)throw x.error}return[7];case 8:return[2]}}))}))}function p(e,t,n){var r=s(e).slice(0);return void 0===t&&(t=0),void 0===n&&(n=r.length),c(this,(function(e){switch(e.label){case 0:return t<n?[4,r.slice(0,++t).join("")]:[3,2];case 1:return e.sent(),[3,0];case 2:return[2]}}))}function v(e,t,n){var r=s(e).slice(0);return void 0===t&&(t=0),void 0===n&&(n=r.length),c(this,(function(e){switch(e.label){case 0:return n>t?[4,r.slice(0,--n).join("")]:[3,2];case 1:return e.sent(),[3,0];case 2:return[2]}}))}var b="index-module_type__E-SaG";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".index-module_type__E-SaG::after {\n content: '|';\n animation: index-module_cursor__PQg0P 1.1s infinite step-start;\n}\n\n@keyframes index-module_cursor__PQg0P {\n 50% {\n opacity: 0;\n }\n}\n");var m=a(o((function(o,a){var u=o.sequence,c=o.repeat,i=o.className,d=o.speed,h=void 0===d?40:d,y=o.deletionSpeed,p=o.omitDeletionAnimation,v=void 0!==p&&p,m=o.wrapper,w=void 0===m?"span":m,x=o.cursor,g=void 0===x||x,S=o.style;y||(y=h);var _=new Array(2).fill(40);[h,y].forEach((function(e,t){switch(typeof e){case"number":_[t]=Math.abs(e-100);break;case"object":var n=e,r=n.type,o=n.value;if("number"!=typeof o)break;if("keyStrokeDelayInMs"===r)_[t]=o}}));var E,k,C,T,A,N,I=_[0],P=_[1],G=function(e,n){void 0===n&&(n=null);var o=t(n);return r((function(){e&&("function"==typeof e?e(o.current):e.current=o.current)}),[e]),o}(a),j=b;E=i?"".concat(g?j+" ":"").concat(i):g?j:"",k=t((function(){var e,t=u;return c===1/0?e=f:"number"==typeof c&&(t=Array(1+c).fill(u).flat()),f.apply(void 0,l(l([G.current,I,P,v],s(t),!1),[e],!1)),function(){G.current}})),C=t(),T=t(!1),A=t(!1),N=s(n(0),2)[1],T.current&&(A.current=!0),r((function(){return T.current||(C.current=k.current(),T.current=!0),N((function(e){return e+1})),function(){A.current&&C.current&&C.current()}}),[]);var M=w;return e.createElement(M,{style:S,className:E,ref:G})})),(function(e,t){return!0}));export{m as TypeAnimation};

27

dist/index.d.ts

@@ -1,15 +0,26 @@

import React from 'react';
import React$1, { HtmlHTMLAttributes } from 'react';
declare type Speed = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99;
interface TypeAnimationProps {
sequence: Array<string | number | ((element: HTMLElement | null) => void | Promise<void>)>;
interface TypeAnimationProps extends Props, HtmlHTMLAttributes<HTMLElement['style']> {
ref?: React.Ref<HTMLElementTagNameMap[Wrapper]>;
}
interface Props {
sequence: Sequence;
repeat?: number;
wrapper?: 'p' | 'div' | 'span' | 'strong' | 'a' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'aside' | 'b';
wrapper?: Wrapper;
cursor?: boolean;
speed?: Speed;
deletionSpeed?: Speed;
speed?: Speed | GranularSpeed;
deletionSpeed?: number | GranularSpeed;
omitDeletionAnimation?: boolean;
}
declare const _default: React.NamedExoticComponent<TypeAnimationProps & React.HtmlHTMLAttributes<CSSStyleDeclaration>>;
type GranularSpeed = {
type: 'keyStrokeDelayInMs';
value: number;
};
type Speed = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99;
type Wrapper = 'p' | 'div' | 'span' | 'strong' | 'a' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'b';
type Sequence = Array<SequenceElement>;
type SequenceElement = string | number | ((element: HTMLElement | null) => void | Promise<void>);
declare const _default: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<Pick<TypeAnimationProps & React$1.HTMLAttributes<HTMLElement | HTMLParagraphElement | HTMLDivElement | HTMLSpanElement | HTMLAnchorElement | HTMLHeadingElement>, "style" | "sequence" | "repeat" | "wrapper" | "cursor" | "speed" | "deletionSpeed" | "omitDeletionAnimation" | "className" | "manifest" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React$1.RefAttributes<HTMLElement | HTMLParagraphElement | HTMLDivElement | HTMLSpanElement | HTMLAnchorElement | HTMLHeadingElement>>>;
export { _default as TypeAnimation };

4

package.json
{
"name": "react-type-animation",
"version": "2.1.2",
"version": "3.0.0",
"description": "Customizable React typing animation component based on typical.",

@@ -73,5 +73,5 @@ "author": "max37",

"tslib": "^2.4.0",
"typescript": "^4.8.4",
"typescript": "^4.9.4",
"typescript-plugin-css-modules": "^3.4.0"
}
}

92

README.md

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

# react-type-animation
# # react-type-animation

@@ -8,10 +8,16 @@ A customizable React typing animation component.

```bash
npm install --save react-type-animation
npm install react-type-animation
```
or
```bash
yarn add react-type-animation
```
Requires a `react` and `react-dom` version of at least 15.0.0.
## Live Demo & Examples
## Live Demo
A live demo can be found at: https://react-type-animation.vercel.app/
A live demo of the animation can be found at: [https://react-type-animation.netlify.app/examples](https://react-type-animation.netlify.app/examples);

@@ -33,9 +39,9 @@ ## Usage

() => {
console.log('Done typing!'); // Place optional callbacks anywhere in the array
console.log('Sequence completed'); // Place optional callbacks anywhere in the array
}
]}
wrapper="div"
wrapper="span"
cursor={true}
repeat={Infinity}
style={{ fontSize: '2em' }}
style={{ fontSize: '2em', display: 'inline-block' }}
/>

@@ -46,20 +52,16 @@ );

## Important Usage Notes ⚠
## Documentation
### Immutability
The docs with props, options and common problem solutions can be found at [https://react-type-animation.netlify.app/](https://react-type-animation.netlify.app/).
Due to the nature of the animation, this component is **permanently memoized**, which means that the component **never** re-renders unless you hard-reload the page, and hence **props changes will not be reflected**. Otherwise, the animation would either bug out or have its sequence required to be reset completely, which due to its nature is not possible at this time (or at least very hacky).
## Migrating to v3
Here is an example which shows that you cannot render dynamic prop-values:
- The default wrapper is now `<span>` instead of `<div>`: **To migrate**, add a `display: inline-block/block` or `wrapper="div"` to all `<TypeAnimation/>` occurances with unspecified wrapper.
```jsx
const [counter, setCounter] = useState(0)
<TypeAnimation
sequence={[`${counter}`, 1000, () => {setCounter(counter++)}]}
repeat={Infinity}
/>
```
## Usage Notes
In the example above, `counter` will always render as "0" within the animation and ignore state changes.
### Immutability
Due to the nature of the animation, this component is **permanently memoized**, which means that the component **never** re-renders unless you hard-reload the page, and hence **props changes will not be reflected**.
### Hot Reload NOT Supported

@@ -71,41 +73,23 @@

### Layout-shift
In order to prevent layout shift caused by the TypeAnimation component's text expanding, when typing long texts, you need to either wrap the TextAnimation component in an HTML element with a fixed width/height which is wider than the maximum expansion of the TypeAnimation element, or make that wrapper's position `absolute`.
## Props
| Prop | Required | Type | Example | Description | Default |
| ----------------------- | -------- | ------- | ------------------------ | ---------------------------------------------------------- | ------- |
| `sequence` | yes | array[] | `['One', 1000, 'Two']` | Animation Sequence: [TEXT, DELAY-MS, CALLBACK] | `none` |
| `wrapper` | no | string | `p`,`h2`,`div`, `strong` | HTML element tag that wraps the Animation | `div` |
| `speed` | no | number | `45`, `75` | Speed Of Animation: **between 1-99**, The lower the slower | `40` |
| `deletionSpeed` | no | number | `45`, `99` | Custom Speed for Deleting | `speed` |
| `omitDeletionAnimation` | no | boolean | `false`, `true` | If true, deletions will be instant and without animation | `false` |
| `repeat` | no | number | `0`, `3`, `Infinity` | Amount of animation repetitions | `0` |
| `cursor` | no | boolean | `false`, `true` | Display default blinking cursor css-animation | `true` |
| `className` | no | string | `custom-class-name` | HTML class name applied to the wrapper to style the text | `none` |
| `style` | no | object | `{fontSize: '2em'}` | JSX inline style object | `none` |
See [https://react-type-animation.netlify.app/options](https://react-type-animation.netlify.app/options) for more details.
## Custom Cursor Animation
| Prop | Required | Type | Example | Description | Default |
| ----------------------- | -------- | ------------------------------------------------------------ | ------------------------------------------------- | -------------------------------------------------------- | ------- |
| `sequence` | yes | Array<number &#124; string &#124; () => void> | `['One', 1000, 'Two', () => console.log("done")]` | Animation sequence: [TEXT, DELAY-MS, CALLBACK] | `-` |
| `wrapper` | no | string | `p`,`h2`,`div`, `strong` | HTML element tag that wraps the typing animation | `span` |
| `speed` | no | 1,2,..,99 &#124; {type: "keyStrokeDelayInMs", value: number} | `45`, `{type: "keyStrokeDelayInMs", value: 100}` | Speed for the writing of the animation | `40` |
| `deletionSpeed` | no | 1,2,..,99 &#124; {type: "keyStrokeDelayInMs", value: number} | `45`, `{type: "keyStrokeDelayInMs", value: 100}` | Speed for deleting of the animation | `speed` |
| `omitDeletionAnimation` | no | boolean | `false`, `true` | If true, deletions will be instant and without animation | `false` |
| `repeat` | no | number | `0`, `3`, `Infinity` | Amount of animation repetitions | `0` |
| `cursor` | no | boolean | `false`, `true` | Display default blinking cursor css-animation | `true` |
| `className` | no | string | `custom-class-name` | HTML class name applied to the wrapper to style the text | `-` |
| `style` | no | object | `{fontSize: '2em'}` | JSX inline style object | `-` |
| `ref` | no | HTMLElement &#124; null | `-` | `-` | `-` |
If you wish to apply a custom cursor animation, set the `cursor` prop to `false` (**which prevents any default css-styles from being applied**) and set a custom `className` prop to the TypeAnimation component with your own css style classes.
---
These are the base styles for the cursor animation:
```css
.type::after {
content: '|';
animation: cursor 1.1s infinite step-start;
}
@keyframes cursor {
50% {
opacity: 0;
}
}
```
If you wish to modify the styles, also set the `cursor` prop to `false` and simply create and import any css file (or `FILE_NAME.module.css` if using css modules), copy and modify the above styles and pass the prop `className="type"` (or `className={styles.type}` if using css modules) to the `TypeAnimation` component to apply the custom styles.
If you would like the cursor to stop after a specific time, consider using a JSX styling library which lets you define CSS dynamically within your JSX Component, or simply replace `infinite` with a static finite number (like `2s`) inside your custom css file.
[npm](https://www.npmjs.com/package/react-type-animation) / [github](https://github.com/maxeth/react-type-animation/)
Credits: [typical](https://github.com/camwiegert/typical)
Shoutouts/Supporters: [blockig](https://www.blockig.com/)
dist/cjs/index.js.map
dist/esm/index.es.js.map
SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc