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 3.0.1 to 3.1.0

2

dist/cjs/components/TypeAnimation/index.d.ts
import React from 'react';
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>>>;
declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<TypeAnimationProps & React.HTMLAttributes<HTMLParagraphElement | HTMLElement | HTMLDivElement | HTMLSpanElement | HTMLAnchorElement | HTMLHeadingElement>, "sequence" | "repeat" | "speed" | "deletionSpeed" | "omitDeletionAnimation" | "preRenderFirstString" | "wrapper" | "cursor" | keyof React.HTMLAttributes<HTMLParagraphElement | HTMLElement | HTMLDivElement | HTMLSpanElement | HTMLAnchorElement | HTMLHeadingElement>> & React.RefAttributes<HTMLParagraphElement | HTMLElement | HTMLDivElement | HTMLSpanElement | HTMLAnchorElement | HTMLHeadingElement>>>;
export default _default;

13

dist/cjs/components/TypeAnimation/index.types.d.ts

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

import { HtmlHTMLAttributes } from 'react';
export interface TypeAnimationProps extends Props, HtmlHTMLAttributes<HTMLElement['style']> {
/// <reference types="react" />
export interface TypeAnimationProps extends Props {
ref?: React.Ref<HTMLElementTagNameMap[Wrapper]>;

@@ -11,4 +11,5 @@ }

speed?: Speed | GranularSpeed;
deletionSpeed?: number | GranularSpeed;
deletionSpeed?: Speed | GranularSpeed;
omitDeletionAnimation?: boolean;
preRenderFirstString?: boolean;
}

@@ -19,6 +20,6 @@ export type GranularSpeed = {

};
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;
export 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;
export 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>);
export type Sequence = Array<SequenceElement>;
export type SequenceElement = string | number | ((element: HTMLElement | null) => void | Promise<void>);
export {};

2

dist/cjs/index.js

@@ -1,1 +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,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;
"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(o,a){function u(e){try{c(r.next(e))}catch(e){a(e)}}function i(e){try{c(r.throw(e))}catch(e){a(e)}}function c(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(u,i)}c((r=r.apply(e,t||[])).next())}))}function o(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:i(0),throw:i(1),return:i(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function i(a){return function(i){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,i])}}}function a(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 u(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 i(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 c(e,t,n,c){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,p,h,y,v;return o(this,(function(o){switch(o.label){case 0:o.trys.push([0,12,13,14]),r=a(f),d=r.next(),o.label=1;case 1:if(d.done)return[3,11];switch(p=d.value,typeof p){case"string":return[3,2];case"number":return[3,4];case"function":return[3,6]}return[3,8];case 2:return[4,l(e,p,t,n,c)];case 3:return o.sent(),[3,10];case 4:return[4,s(p)];case 5:return o.sent(),[3,10];case 6:return[4,p.apply(void 0,i([e,t,n,c],u(f),!1))];case 7:return o.sent(),[3,10];case 8:return[4,p];case 9:o.sent(),o.label=10;case 10:return d=r.next(),[3,1];case 11:return[3,14];case 12:return h=o.sent(),y={error:h},[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 l(e,t,n,a,c){return r(this,void 0,void 0,(function(){var r;return o(this,(function(o){switch(o.label){case 0:return r=function(e,t){var n=u(t).slice(0);return i(i([],u(e),!1),[NaN],!1).findIndex((function(e,t){return n[t]!==e}))}(e.textContent,t),[4,f(e,i(i([],u(p(e.textContent,r)),!1),u(d(t,r)),!1),n,a,c)];case 1:return o.sent(),[2]}}))}))}function s(e){return r(this,void 0,void 0,(function(){return o(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,i,c){return r(this,void 0,void 0,(function(){var r,l,f,d,p,h,y,v,b,m,w,x,g;return o(this,(function(S){switch(S.label){case 0:if(r=t,c){for(l=0,f=1;f<t.length;f++)if(d=u([t[f-1],t[f]],2),p=d[0],(h=d[1]).length>p.length||""===h){l=f;break}r=t.slice(l,t.length)}S.label=1;case 1:S.trys.push([1,6,7,8]),y=a(function(e){var t,n,r,u,i,c,l;return o(this,(function(s){switch(s.label){case 0:t=function(e){return o(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=a(e),r=n.next(),s.label=2;case 2:return r.done?[3,5]:(u=r.value,[5,t(u)]);case 3:s.sent(),s.label=4;case 4:return r=n.next(),[3,2];case 5:return[3,8];case 6:return i=s.sent(),c={error:i},[3,8];case 7:try{r&&!r.done&&(l=n.return)&&l.call(n)}finally{if(c)throw c.error}return[7];case 8:return[2]}}))}(r)),v=y.next(),S.label=2;case 2:return v.done?[3,5]:(b=v.value,m="WRITING"===b.opCode(e)?n+n*(Math.random()-.5):i+i*(Math.random()-.5),b.op(e),[4,s(m)]);case 3:S.sent(),S.label=4;case 4:return v=y.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=y.return)&&g.call(y)}finally{if(x)throw x.error}return[7];case 8:return[2]}}))}))}function d(e,t,n){var r=u(e).slice(0);return void 0===t&&(t=0),void 0===n&&(n=r.length),o(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 p(e,t,n){var r=u(e).slice(0);return void 0===t&&(t=0),void 0===n&&(n=r.length),o(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 h="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 y=e.forwardRef((function(t,r){var o=t.sequence,a=t.repeat,l=t.className,s=t.speed,f=void 0===s?40:s,d=t.deletionSpeed,p=t.omitDeletionAnimation,y=void 0!==p&&p,v=t.preRenderFirstString,b=void 0!==v&&v,m=t.wrapper,w=void 0===m?"span":m,x=t.cursor,g=void 0===x||x,S=t.style,E=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]])}return n}(t,["sequence","repeat","className","speed","deletionSpeed","omitDeletionAnimation","preRenderFirstString","wrapper","cursor","style"]),_=E["aria-label"],O=E["aria-hidden"];d||(d=f);var j=new Array(2).fill(40);[f,d].forEach((function(e,t){switch(typeof e){case"number":j[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)j[t]=o}}));var k,C,P,R,T,A,N,I=j[0],G=j[1],M=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),q=h;k=l?"".concat(g?q+" ":"").concat(l):g?q:"",C=function(){var e,t=o;return a===1/0?e=c:"number"==typeof a&&(t=Array(1+a).fill(o).flat()),c.apply(void 0,i(i([M.current,I,G,y],u(t),!1),[e],!1)),function(){M.current}},P=e.useRef(C),R=e.useRef(),T=e.useRef(!1),A=e.useRef(!1),N=u(e.useState(0),2)[1],T.current&&(A.current=!0),e.useEffect((function(){return T.current||(R.current=P.current(),T.current=!0),N((function(e){return e+1})),function(){A.current&&R.current&&R.current()}}),[]);var D=w,F=b?o.find((function(e){return"string"==typeof e}))||"":null;return n.default.createElement(D,{"aria-hidden":O,"aria-label":_,style:S,className:k,children:_?n.default.createElement("span",{"aria-hidden":"true",ref:M,children:F}):F,ref:_?void 0:M})})),v=e.memo(y,(function(e,t){return!0}));exports.TypeAnimation=v;

2

dist/esm/components/TypeAnimation/index.d.ts
import React from 'react';
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>>>;
declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<TypeAnimationProps & React.HTMLAttributes<HTMLParagraphElement | HTMLElement | HTMLDivElement | HTMLSpanElement | HTMLAnchorElement | HTMLHeadingElement>, "sequence" | "repeat" | "speed" | "deletionSpeed" | "omitDeletionAnimation" | "preRenderFirstString" | "wrapper" | "cursor" | keyof React.HTMLAttributes<HTMLParagraphElement | HTMLElement | HTMLDivElement | HTMLSpanElement | HTMLAnchorElement | HTMLHeadingElement>> & React.RefAttributes<HTMLParagraphElement | HTMLElement | HTMLDivElement | HTMLSpanElement | HTMLAnchorElement | HTMLHeadingElement>>>;
export default _default;

13

dist/esm/components/TypeAnimation/index.types.d.ts

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

import { HtmlHTMLAttributes } from 'react';
export interface TypeAnimationProps extends Props, HtmlHTMLAttributes<HTMLElement['style']> {
/// <reference types="react" />
export interface TypeAnimationProps extends Props {
ref?: React.Ref<HTMLElementTagNameMap[Wrapper]>;

@@ -11,4 +11,5 @@ }

speed?: Speed | GranularSpeed;
deletionSpeed?: number | GranularSpeed;
deletionSpeed?: Speed | GranularSpeed;
omitDeletionAnimation?: boolean;
preRenderFirstString?: boolean;
}

@@ -19,6 +20,6 @@ export type GranularSpeed = {

};
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;
export 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;
export 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>);
export type Sequence = Array<SequenceElement>;
export type SequenceElement = string | number | ((element: HTMLElement | null) => void | Promise<void>);
export {};

2

dist/esm/index.es.js

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

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};
import e,{useRef as t,useState as n,useEffect as r,forwardRef as o,memo as a}from"react";function i(e,t,n,r){return new(n||(n=Promise))((function(o,a){function i(e){try{u(r.next(e))}catch(e){a(e)}}function c(e){try{u(r.throw(e))}catch(e){a(e)}}function u(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(i,c)}u((r=r.apply(e,t||[])).next())}))}function c(e,t){var n,r,o,a,i={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(;i;)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 i.label++,{value:a[1],done:!1};case 5:i.label++,r=a[1],a=[0];continue;case 7:a=i.ops.pop(),i.trys.pop();continue;default:if(!(o=i.trys,(o=o.length>0&&o[o.length-1])||6!==a[0]&&2!==a[0])){i=0;continue}if(3===a[0]&&(!o||a[1]>o[0]&&a[1]<o[3])){i.label=a[1];break}if(6===a[0]&&i.label<o[1]){i.label=o[1],o=a;break}if(o&&i.label<o[2]){i.label=o[2],i.ops.push(a);break}o[2]&&i.ops.pop(),i.trys.pop();continue}a=t.call(e,i)}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 u(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 l(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,o,a=n.call(e),i=[];try{for(;(void 0===t||t-- >0)&&!(r=a.next()).done;)i.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 i}function s(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 i(this,void 0,void 0,(function(){var a,i,f,h,y,v;return c(this,(function(c){switch(c.label){case 0:c.trys.push([0,12,13,14]),a=u(o),i=a.next(),c.label=1;case 1:if(i.done)return[3,11];switch(f=i.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,p(f)];case 5:return c.sent(),[3,10];case 6:return[4,f.apply(void 0,s([e,t,n,r],l(o),!1))];case 7:return c.sent(),[3,10];case 8:return[4,f];case 9:c.sent(),c.label=10;case 10:return i=a.next(),[3,1];case 11:return[3,14];case 12:return h=c.sent(),y={error:h},[3,14];case 13:try{i&&!i.done&&(v=a.return)&&v.call(a)}finally{if(y)throw y.error}return[7];case 14:return[2]}}))}))}function d(e,t,n,r,o){return i(this,void 0,void 0,(function(){var a;return c(this,(function(i){switch(i.label){case 0:return a=function(e,t){var n=l(t).slice(0);return s(s([],l(e),!1),[NaN],!1).findIndex((function(e,t){return n[t]!==e}))}(e.textContent,t),[4,h(e,s(s([],l(v(e.textContent,a)),!1),l(y(t,a)),!1),n,r,o)];case 1:return i.sent(),[2]}}))}))}function p(e){return i(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 h(e,t,n,r,o){return i(this,void 0,void 0,(function(){var a,i,s,f,d,h,y,v,b,m,w,x,g;return c(this,(function(S){switch(S.label){case 0:if(a=t,o){for(i=0,s=1;s<t.length;s++)if(f=l([t[s-1],t[s]],2),d=f[0],(h=f[1]).length>d.length||""===h){i=s;break}a=t.slice(i,t.length)}S.label=1;case 1:S.trys.push([1,6,7,8]),y=u(function(e){var t,n,r,o,a,i,l;return c(this,(function(s){switch(s.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]}}))},s.label=1;case 1:s.trys.push([1,6,7,8]),n=u(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)),v=y.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,p(m)]);case 3:S.sent(),S.label=4;case 4:return v=y.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=y.return)&&g.call(y)}finally{if(x)throw x.error}return[7];case 8:return[2]}}))}))}function y(e,t,n){var r=l(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=l(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 i=o.sequence,c=o.repeat,u=o.className,d=o.speed,p=void 0===d?40:d,h=o.deletionSpeed,y=o.omitDeletionAnimation,v=void 0!==y&&y,m=o.preRenderFirstString,w=void 0!==m&&m,x=o.wrapper,g=void 0===x?"span":x,S=o.cursor,E=void 0===S||S,_=o.style,k=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]])}return n}(o,["sequence","repeat","className","speed","deletionSpeed","omitDeletionAnimation","preRenderFirstString","wrapper","cursor","style"]),C=k["aria-label"],O=k["aria-hidden"];h||(h=p);var T=new Array(2).fill(40);[p,h].forEach((function(e,t){switch(typeof e){case"number":T[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[t]=o}}));var A,N,P,j,I,G,D=T[0],M=T[1],R=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),q=b;A=u?"".concat(E?q+" ":"").concat(u):E?q:"",N=t((function(){var e,t=i;return c===1/0?e=f:"number"==typeof c&&(t=Array(1+c).fill(i).flat()),f.apply(void 0,s(s([R.current,D,M,v],l(t),!1),[e],!1)),function(){R.current}})),P=t(),j=t(!1),I=t(!1),G=l(n(0),2)[1],j.current&&(I.current=!0),r((function(){return j.current||(P.current=N.current(),j.current=!0),G((function(e){return e+1})),function(){I.current&&P.current&&P.current()}}),[]);var F=g,B=w?i.find((function(e){return"string"==typeof e}))||"":null;return e.createElement(F,{"aria-hidden":O,"aria-label":C,style:_,className:A,children:C?e.createElement("span",{"aria-hidden":"true",ref:R,children:B}):B,ref:C?void 0:R})})),(function(e,t){return!0}));export{m as TypeAnimation};

10

dist/index.d.ts

@@ -1,4 +0,5 @@

import React$1, { HtmlHTMLAttributes } from 'react';
/// <reference types="react" />
import React$1 from 'react';
interface TypeAnimationProps extends Props, HtmlHTMLAttributes<HTMLElement['style']> {
interface TypeAnimationProps extends Props {
ref?: React.Ref<HTMLElementTagNameMap[Wrapper]>;

@@ -12,4 +13,5 @@ }

speed?: Speed | GranularSpeed;
deletionSpeed?: number | GranularSpeed;
deletionSpeed?: Speed | GranularSpeed;
omitDeletionAnimation?: boolean;
preRenderFirstString?: boolean;
}

@@ -25,4 +27,4 @@ type GranularSpeed = {

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>>>;
declare const _default: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<Pick<TypeAnimationProps & React$1.HTMLAttributes<HTMLParagraphElement | HTMLElement | HTMLDivElement | HTMLSpanElement | HTMLAnchorElement | HTMLHeadingElement>, "sequence" | "repeat" | "speed" | "deletionSpeed" | "omitDeletionAnimation" | "preRenderFirstString" | "wrapper" | "cursor" | keyof React$1.HTMLAttributes<HTMLParagraphElement | HTMLElement | HTMLDivElement | HTMLSpanElement | HTMLAnchorElement | HTMLHeadingElement>> & React$1.RefAttributes<HTMLParagraphElement | HTMLElement | HTMLDivElement | HTMLSpanElement | HTMLAnchorElement | HTMLHeadingElement>>>;
export { _default as TypeAnimation };

2

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

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

54

README.md

@@ -21,6 +21,8 @@ # react-type-animation

A live demo of the animation can be found at: [https://react-type-animation.netlify.app/examples](https://react-type-animation.netlify.app/examples).
A live demo and usage examples of the animation can be found at [https://react-type-animation.netlify.app/examples](https://react-type-animation.netlify.app/examples).
## Usage
A common typewriter animation for a landing page would look like this:
```jsx

@@ -33,15 +35,16 @@ import { TypeAnimation } from 'react-type-animation';

sequence={[
'One', // Types 'One'
1000, // Waits 1s
'Two', // Deletes 'One' and types 'Two'
2000, // Waits 2s
'Two Three', // Types 'Three' without deleting 'Two'
() => {
console.log('Sequence completed'); // Place optional callbacks anywhere in the array
}
// Same substring at the start will only be typed out once, initially
'We produce food for Mice',
1000, // wait 1s before replacing "Mice" with "Hamsters"
'We produce food for Hamsters',
1000,
'We produce food for Guinea Pigs',
1000,
'We produce food for Chinchillas',
1000
]}
wrapper="span"
cursor={true}
speed={50}
style={{ fontSize: '2em', display: 'inline-block' }}
repeat={Infinity}
style={{ fontSize: '2em', display: 'inline-block' }}
/>

@@ -76,19 +79,24 @@ );

| 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 | `-` | `-` | `-` |
| Prop | Required | Type | Example | Description | Default |
| ----------------------- | -------- | -------------------------------------------------------------------- | ------------------------------------------------- | -------------------------------------------------------------------------------------------- | ------- |
| `sequence` | yes | Array<number &#124; string &#124; (() => void &#124; Promise<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` |
| `preRenderFirstString` | no | boolean | `false`, `true` | If true, the first string of your sequence will not be animated and initially (pre-)rendered | `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 | `-` | `-` | `-` |
---
<br>
<br>
<br>
[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/)
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