{"_id":"@alvarobarrerotanarro/react-auto-typing","_rev":"6-c33d1729f065570608e835029eb10a24","name":"@alvarobarrerotanarro/react-auto-typing","dist-tags":{"latest":"3.0.3"},"versions":{"1.0.0":{"name":"@alvarobarrerotanarro/react-auto-typing","version":"1.0.0","keywords":["react","component","library","typing","animation"],"author":{"name":"alvarobarrerotanarro"},"license":"LGPL-2.0-only","_id":"@alvarobarrerotanarro/react-auto-typing@1.0.0","maintainers":[{"name":"alvarobarrerotanarro","email":"barreroalvaro2007@gmail.com"}],"dist":{"shasum":"c63783ed14ca8c552f2e8c0d0d8c36d5678fb6c1","tarball":"https://registry.npmjs.org/@alvarobarrerotanarro/react-auto-typing/-/react-auto-typing-1.0.0.tgz","fileCount":21,"integrity":"sha512-jtcBpNZ7Y3jY+9LcbwHm/C7FmIGlXaotRQW7f+/qYlR684XFtg9L5IaFrF9a3qVFvIkhhyo4np7COz98odi9ZA==","signatures":[{"sig":"MEQCIBOdfgRvcjBmVRLZdSGP8Hxyxps8mAwgI5pmfmIKDCOLAiBNdvmTPNdWr+yA4YGMCMM+tYnbFvcDh8jP9KOqN3dpvw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":15280},"main":"./dist/index.js","type":"module","types":"./@types/index.d.ts","gitHead":"69a00146eb41b510b2e2da2e74094382991ca138","scripts":{"build":"npx tsc -b"},"_npmUser":{"name":"alvarobarrerotanarro","email":"barreroalvaro2007@gmail.com"},"_npmVersion":"11.6.2","description":"","directories":{},"_nodeVersion":"25.1.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/react-auto-typing_1.0.0_1763249039350_0.6630540165264014","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"name":"@alvarobarrerotanarro/react-auto-typing","version":"2.0.0","keywords":["react","component","library","typing","animation"],"author":{"name":"alvarobarrerotanarro"},"license":"LGPL-2.0-only","_id":"@alvarobarrerotanarro/react-auto-typing@2.0.0","maintainers":[{"name":"alvarobarrerotanarro","email":"barreroalvaro2007@gmail.com"}],"dist":{"shasum":"06995f691313bf181009ebdbdca2f32b2de15a20","tarball":"https://registry.npmjs.org/@alvarobarrerotanarro/react-auto-typing/-/react-auto-typing-2.0.0.tgz","fileCount":21,"integrity":"sha512-PR/Gw1M+AVmaTEXjCbdAraJ+C9O5X7ONNunP7WD47wlqzlEeuVXhQCXA00hOnL6BDIpHIyIZjIvq7Lb6gkXCwg==","signatures":[{"sig":"MEUCIFfHiBU/Ri8UrKBEHFOZno+mfd8e/dZ5KF2EGKtYcuPgAiEAgwIzhkLzEfI/C+TTwjbJlypn6Qq7lGjhpABt2y+B3Sk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":15502},"main":"./dist/index.js","type":"module","types":"./@types/index.d.ts","gitHead":"f71af97ed44e8e2202e277889ef18f72740c75ef","scripts":{"build":"npx tsc -b"},"_npmUser":{"name":"alvarobarrerotanarro","email":"barreroalvaro2007@gmail.com"},"_npmVersion":"11.6.2","description":"","directories":{},"_nodeVersion":"25.1.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^19.2.0"},"_npmOperationalInternal":{"tmp":"tmp/react-auto-typing_2.0.0_1763254714598_0.09186407576864886","host":"s3://npm-registry-packages-npm-production"}},"3.0.0":{"name":"@alvarobarrerotanarro/react-auto-typing","version":"3.0.0","keywords":["react","component","library","typing","animation"],"author":{"name":"alvarobarrerotanarro"},"license":"LGPL-2.0-only","_id":"@alvarobarrerotanarro/react-auto-typing@3.0.0","maintainers":[{"name":"alvarobarrerotanarro","email":"barreroalvaro2007@gmail.com"}],"dist":{"shasum":"3099bf74a2734498b6b19b84e8d4c640791898c4","tarball":"https://registry.npmjs.org/@alvarobarrerotanarro/react-auto-typing/-/react-auto-typing-3.0.0.tgz","fileCount":21,"integrity":"sha512-PO9CCuYtbDwfT37YoXHiYxPIJ1QEElTB1JbcLZYw7z/hBF7HREOqjFtDAG/K9hwBzgjaabXeP6CCVxhFFiXHPg==","signatures":[{"sig":"MEQCIH76qpNJH4OdX166a4ioVqAj28/xT0X12o+RyJwVPpuOAiAMrm8Ysnni61ldurv/c9PSF+iFeOXjqOfPlmiRA5i1RA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":15747},"main":"./dist/index.js","type":"module","types":"./@types/index.d.ts","gitHead":"f71af97ed44e8e2202e277889ef18f72740c75ef","scripts":{"build":"npx tsc -b"},"_npmUser":{"name":"alvarobarrerotanarro","email":"barreroalvaro2007@gmail.com"},"_npmVersion":"11.6.2","description":"","directories":{},"_nodeVersion":"25.1.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.9.3","@types/node":"^24.10.1","@types/react":">=16.8.0"},"peerDependencies":{"react":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-auto-typing_3.0.0_1763300437163_0.10383128470882474","host":"s3://npm-registry-packages-npm-production"}},"3.0.1":{"name":"@alvarobarrerotanarro/react-auto-typing","version":"3.0.1","keywords":["react","component","library","typing","animation"],"author":{"name":"alvarobarrerotanarro"},"license":"LGPL-2.0-only","_id":"@alvarobarrerotanarro/react-auto-typing@3.0.1","maintainers":[{"name":"alvarobarrerotanarro","email":"barreroalvaro2007@gmail.com"}],"dist":{"shasum":"f36132f61699c62f7d7564db8e88e253e9c14b55","tarball":"https://registry.npmjs.org/@alvarobarrerotanarro/react-auto-typing/-/react-auto-typing-3.0.1.tgz","fileCount":21,"integrity":"sha512-s3YJ5WB28UY++PhMr3iqpT+PMtbRpZlnLoDvI0BBwyObqwMUTjgZKpQg2rFqDx4b2H57FMM6+JJT1TYPwZUB+g==","signatures":[{"sig":"MEUCIQCAtf+6rdJw2we+lGRifWTP4EGW67UYIy8FrAPbgn2sZQIgYsHlv0HuNbT9ZjafBU5tWscslimLEOI7PImMJ9P3ur4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":15889},"main":"./dist/index.js","type":"module","types":"./@types/index.d.ts","gitHead":"ba1a808b8ddf5fb838683b2a24573efab5524462","scripts":{"build":"npx tsc -b"},"_npmUser":{"name":"alvarobarrerotanarro","email":"barreroalvaro2007@gmail.com"},"_npmVersion":"11.6.2","description":"","directories":{},"_nodeVersion":"25.1.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.9.3","@types/node":"^24.10.1","@types/react":">=16.8.0"},"peerDependencies":{"react":"16.x || 17.x || 18.x || 19.x"},"_npmOperationalInternal":{"tmp":"tmp/react-auto-typing_3.0.1_1763318640163_0.16442831402455016","host":"s3://npm-registry-packages-npm-production"}},"3.0.2":{"name":"@alvarobarrerotanarro/react-auto-typing","version":"3.0.2","keywords":["react","component","library","typing","animation"],"author":{"name":"alvarobarrerotanarro"},"license":"LGPL-2.0-only","_id":"@alvarobarrerotanarro/react-auto-typing@3.0.2","maintainers":[{"name":"alvarobarrerotanarro","email":"barreroalvaro2007@gmail.com"}],"dist":{"shasum":"672fa9b47d162315a3b14cdddebe79102e6475eb","tarball":"https://registry.npmjs.org/@alvarobarrerotanarro/react-auto-typing/-/react-auto-typing-3.0.2.tgz","fileCount":21,"integrity":"sha512-3AKwYeHqWN6yB5lAchhcEt9mJffcbdCdkOmZkwt1fU0e7xepppd+audmPUEkX2w6TovSO51yjxqowBqhAlDRNA==","signatures":[{"sig":"MEQCICjd+sIq6PM5jaNotZH2yDVtsod5DNpd97O345my3MUfAiAK29UffQoiWR8NGZk3DeGlQ1ak7p+DpVjAx3LzqTFQpg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":15887},"main":"./dist/index.js","type":"module","types":"./@types/index.d.ts","gitHead":"973a9c9d4d4697eca2a1448446c10a8efffeb516","scripts":{"build":"npx tsc -b"},"_npmUser":{"name":"alvarobarrerotanarro","email":"barreroalvaro2007@gmail.com"},"_npmVersion":"11.6.2","description":"","directories":{},"_nodeVersion":"25.1.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.9.3","@types/node":"^24.10.1","@types/react":">=16.8.0"},"peerDependencies":{"react":">=16.8.0 <20 || >=19.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/react-auto-typing_3.0.2_1763320085880_0.3247869176306304","host":"s3://npm-registry-packages-npm-production"}},"3.0.3":{"name":"@alvarobarrerotanarro/react-auto-typing","publishConfig":{"access":"public"},"version":"3.0.3","description":"A lightweight React library for creating typing text animations with minimal effort.","type":"module","main":"./dist/index.js","types":"./@types/index.d.ts","scripts":{"build":"npx tsc -b"},"keywords":["react","component","library","typing","animation"],"author":{"name":"alvarobarrerotanarro"},"license":"LGPL-2.0-only","peerDependencies":{"react":">=16.8.0 <20 || >=19.0.0-0"},"devDependencies":{"@types/node":"^24.10.1","@types/react":">=16.8.0","typescript":"^5.9.3"},"gitHead":"973a9c9d4d4697eca2a1448446c10a8efffeb516","_id":"@alvarobarrerotanarro/react-auto-typing@3.0.3","_nodeVersion":"25.1.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-QKO/8E8xyGyjoFzc61jhDxSPpAdcKo/eINae+T5mWAaMZ/Bhrsb8vkExSp0m4m7f8GR8aOEPvsKpmWcNHAjOoA==","shasum":"cba6c4906600100c483e6de74e63d7c8068dda94","tarball":"https://registry.npmjs.org/@alvarobarrerotanarro/react-auto-typing/-/react-auto-typing-3.0.3.tgz","fileCount":22,"unpackedSize":19764,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCEM7eqnXHsyzWcGjwUeZREDZaDyuS8z9u9elLDhzH6lQIhAJy/yjJVzkuCqhqFhC/XOhRVkqCRxEGdbhIQqmgwuPN/"}]},"_npmUser":{"name":"alvarobarrerotanarro","email":"barreroalvaro2007@gmail.com"},"directories":{},"maintainers":[{"name":"alvarobarrerotanarro","email":"barreroalvaro2007@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-auto-typing_3.0.3_1763376925788_0.0794037225693367"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-15T23:23:59.215Z","modified":"2025-11-17T10:55:26.516Z","1.0.0":"2025-11-15T23:23:59.529Z","2.0.0":"2025-11-16T00:58:34.808Z","3.0.0":"2025-11-16T13:40:37.343Z","3.0.1":"2025-11-16T18:44:00.357Z","3.0.2":"2025-11-16T19:08:06.083Z","3.0.3":"2025-11-17T10:55:25.974Z"},"author":{"name":"alvarobarrerotanarro"},"license":"LGPL-2.0-only","keywords":["react","component","library","typing","animation"],"maintainers":[{"name":"alvarobarrerotanarro","email":"barreroalvaro2007@gmail.com"}],"readme":"# react-auto-typing\nA lightweight React library for creating typing text animations with minimal effort.\n\nIt provides a ready-to-use component for quick implementation, or you can use the underlying React hook to build custom components.\n\n\n\n## Quick Example\n\nThe following example will type at screen the words \"This is magic!\".\n\n```ts\nimport { TypingText } from \"@alvarobarrerotanarro/react-auto-typing\"\n\nexport default function App() {\n return (\n \n
Hello World
\n This is magic!
\n \n );\n}\n```\n\n## Timings\n\nWe may also customize how much time will it take to type the whole text, to do so we can use the `duration` and `delay` props. The first one is an absolute measure of the time that the component will take to type the text, whereas the second one indicates when the animation begings.\n\n```ts\nimport { TypingText } from \"@alvarobarrerotanarro/react-auto-typing\"\n\nexport default function App() {\n return (\n \n
Hello World
\n \n \n This is magic!\n \n
\n \n );\n}\n```\n\n## Cursors\n\nThe `TypingText` React component automatically brings a typing cursor with it. However we may be interested in adding custom styles to it or replace it by any other react node such as other component.\n\nIn the following example we are replacing the old cursor component by a new one that consists of the same one but in light mode version.\n\n```ts\nimport { TypingText, DefaultCursor } from \"@alvarobarrerotanarro/react-auto-typing\"\n\nexport default function App() {\n return (\n \n
Hello World
\n \n }\n >\n This is magic!\n \n
\n \n );\n}\n\n```\n\nIn this other example we are creating our own cursor component and then passing it to TypingText.\n\n```ts\nimport { TypingText, DefaultCursor } from \"@alvarobarrerotanarro/react-auto-typing\"\n\nfunction CustomCursor({ height = 12 }: { height?: number }) {\n return (\n \n \n
\n \n );\n}\n\nexport default function App() {\n return (\n \n
Hello World
\n \n }\n >\n This is magic!\n \n
\n \n );\n}\n\n```\n\n## useAnimationText\n\nIf you need a higher level of control over the animation you can try to implement your own version of the `TypingText` component by consuming the underlying custom hook `useAnimationText`.\n\n```ts\nimport { useTextAnimation } from \"@alvarobarrerotanarro/react-auto-typing\"\n\nconst MyDynamicText = ({\n children = \"\",\n className,\n style,\n duration = 500,\n}: TypingTextProps) => {\n\n /**\n * textState - the text state\n * animationPlayer - starts the animation\n * animationKiller - stops the current animation\n */\n const [textState, animationPlayer, animationKiller] = useTextAnimation({ target: children, duration });\n\n /**\n * If the animationPlayer changes, kill the previous\n * animaton and play the new one.\n */\n useEffect(() => {\n const timeout = setTimeout(() => {\n animationPlayer();\n }, delay);\n\n return () => {\n clearInterval(timeout);\n animationKiller();\n }\n }, [animationPlayer]);\n\n return (\n {textState.text}\n );\n}\n```","readmeFilename":"README.md","description":"A lightweight React library for creating typing text animations with minimal effort."}