react-ts-typewriter - npm Package Compare versions

Comparing version 0.1.7 to 0.1.8

dist/Typewriter.d.ts

@@ -10,3 +10,4 @@ /// <reference types="react" />
     onFinished?: Function;
+    onStart?: Function;
 }
-export default function Typewriter({ text, speed, loop, random, delay, cursor, onFinished }: ITypewriterProps): JSX.Element;
+export default function Typewriter({ text, speed, loop, random, delay, cursor, onFinished, onStart }: ITypewriterProps): JSX.Element;

dist/Typewriter.js

 import React, { useState, useEffect } from 'react';
 import styles from './Typewriter.module.css';
 const DEFAULT_MS = 30;
-export default function Typewriter({ text, speed = DEFAULT_MS, loop = false, random = DEFAULT_MS, delay = DEFAULT_MS, cursor = true, onFinished = () => { } }) {
+export default function Typewriter({ text, speed = DEFAULT_MS, loop = false, random = DEFAULT_MS, delay = DEFAULT_MS, cursor = true, onFinished = () => { }, onStart = () => { } }) {
     const [currentStringIndex, setCurrentStringIndex] = useState(0);
     const [currentTextIndex, setCurrentTextIndex] = useState(0);
+    if (!Array.isArray(text))
+        text = [text];
     useEffect(() => {
         setTimeout(() => {
-            if (Array.isArray(text)) {
-                // if text is an array
-                if (currentTextIndex < text[currentStringIndex].length) {
-                    setCurrentTextIndex(currentTextIndex + 1);
-                }
-                else {
-                    if (currentStringIndex < text.length - 1) {
-                        setTimeout(() => {
-                            setCurrentTextIndex(0);
-                            setCurrentStringIndex(currentStringIndex + 1);
-                        }, delay);
-                    }
-                    else {
-                        if (loop) {
-                            setTimeout(() => {
-                                setCurrentTextIndex(0);
-                                setCurrentStringIndex(0);
-                            }, delay);
-                        }
-                        else {
-                            onFinished();
-                        }
-                    }
-                }
+            if (currentTextIndex === 0)
+                onStart();
+            if (currentTextIndex < text[currentStringIndex].length) {
+                setCurrentTextIndex(currentTextIndex + 1);
             }
             else {
-                // if text is string
-                if (currentTextIndex < text.length) {
-                    setCurrentTextIndex(currentTextIndex + 1);
+                if (currentStringIndex < text.length - 1) {
+                    setTimeout(() => {
+                        setCurrentTextIndex(0);
+                        setCurrentStringIndex(currentStringIndex + 1);
+                    }, delay);
                 }
@@ -43,2 +27,3 @@ else {
                             setCurrentTextIndex(0);
+                            setCurrentStringIndex(0);
                         }, delay);
@@ -53,10 +38,5 @@ }
     });
-    if (Array.isArray(text))
-        return (React.createElement("span", null,
-            text[currentStringIndex].substring(0, currentTextIndex),
-            React.createElement("span", { className: styles.cursor }, cursor && '▎')));
-    else
-        return (React.createElement("span", null,
-            text.substring(0, currentTextIndex),
-            React.createElement("span", { className: styles.cursor }, cursor && '▎')));
+    return (React.createElement("span", null,
+        text[currentStringIndex].substring(0, currentTextIndex),
+        React.createElement("span", { className: styles.cursor }, cursor && '▎')));
 }

package.json

 {
   "name": "react-ts-typewriter",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "React typewriter component written in TypeScript with React 18",
@@ -18,3 +18,3 @@ "main": "dist/Typewriter.js",
   "type": "module",
-  "author": "",
+  "author": "Gerard Marquina Rubio",
   "license": "BSD-3-Clause",
@@ -25,12 +25,22 @@ "bugs": {
   "scripts": {
-    "clean": "rm -rf dist",
-    "prepublish": "tsc && cp Typewriter.module.css dist/"
+    "test": "react-scripts test",
+    "clean": "rm -rf ./dist/",
+    "prepublish": "tsc && cp ./src/Typewriter.module.css ./dist/"
   },
   "homepage": "https://github.com/gerardmarquinarubio/ReactTypewriter#readme",
   "dependencies": {
-    "react": "^18.2.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.14"
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "@types/jest": "^28.1.3",
+    "@types/node": "^18.0.0",
+    "@types/react": "^18.0.14",
+    "@types/react-dom": "^18.0.5",
+    "jest": "^28.1.1",
+    "react-scripts": "^5.0.1",
+    "typescript": "^4.7.4"
   }
 }

README.md

@@ -1,11 +0,12 @@
-# React Typewriter
+# React Typewriter ⌨️
 
 ![](https://img.shields.io/badge/-typescript-blue) 
 ![](https://img.shields.io/badge/react-v18.2-%2361DBFB)
-![https://github.com/gerardmarquinarubio/ReactTypewriter/releases/tag/0.1.6](https://img.shields.io/badge/version-v0.1.6-green)
-![https://www.npmjs.com/package/react-ts-typewriter](https://img.shields.io/badge/npm-published-red)
+![https://github.com/gerardmarquinarubio/ReactTypewriter/releases/tag/0.1.6](https://img.shields.io/badge/version-v0.1.7-green)
+![https://www.npmjs.com/package/react-ts-typewriter](https://img.shields.io/badge/package-npm-red)
+![](https://img.shields.io/badge/featured-awesome--react--components-blueviolet)
 
 ![](/usage.gif)
 
-React Typewriter is a simple component that allows you to create a nice "typewriter" effect to any text by simply invoking the component. [Take a look in NPM](https://www.npmjs.com/package/react-ts-typewriter).
+React Typewriter is a simple component that allows you to create a nice "typewriter" effect to any text by simply invoking the component. [Try on codesandbox.io](https://codesandbox.io/s/react-typewriter-example-mgyclf).
 
@@ -32,18 +33,2 @@ ## Installation
 
-```tsx
-import Typewriter from 'react-ts-typewriter';
-
-export default function myComponent() {
-    return (
-        <h1>
-            <Typewriter 
-            text={['Hello', 'how', 'are', 'you?']}
-            delay={500}
-            loop={false} 
-            />
-        </h1>
-    )
-}
-```
-
 ## Props
@@ -60,3 +45,3 @@ > text : string | string[]
 
-Set to true if the typewriter should loop after finishing typing the word(s). *Defaults to false*.
+Set to true if the typewriter should loop after finishing typing the string(s). *Defaults to false*.
 
@@ -77,2 +62,6 @@ > random?: number = 30
 
-Callback function after Typewriter animation is complete, never triggers if <code>loop</code> is true. *Defaults to () => void*
+Callback function after Typewriter animation is complete, never triggers if <code>loop</code> is true. *Defaults to () => void*
+
+> onStart?: Function = () => void
+
+Callback function before Typewriter animation is started on each string. *Defaults to () => void*.

tsconfig.json

@@ -29,3 +29,3 @@ {
     "module": "es6",                                /* Specify what module code is generated. */
-    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
+    "rootDir": "./src",                                  /* Specify the root folder within your source files. */
     "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
@@ -32,0 +32,0 @@ // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

Improved metrics

Number of low maintenance alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

22326

decreased by-87.83%

Dependency count

2

increased by100%

Dev dependency count

9

increased by800%

Number of package files

13

decreased by-43.48%

Lines of code

226

decreased by-42.64%

Number of lines in readme file

64

decreased by-14.67%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedreact-dom@^18.2.0

• + Addedreact-dom@18.3.1(transitive)

• + Addedscheduler@0.23.2(transitive)