react-ts-typewriter - npm Package Compare versions

Comparing version 0.1.6 to 0.1.7-a

dist/Typewriter.d.ts

@@ -9,3 +9,5 @@ /// <reference types="react" />
     cursor?: boolean;
+    onFinished?: Function;
+    onStart?: Function;
 }
-export default function Typewriter({ text, speed, loop, random, delay, cursor }: 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 }) {
+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);
@@ -28,2 +28,5 @@ const [currentTextIndex, setCurrentTextIndex] = useState(0);
                         }
+                        else {
+                            onFinished();
+                        }
                     }
@@ -43,2 +46,5 @@ }
                     }
+                    else {
+                        onFinished();
+                    }
                 }
@@ -45,0 +51,0 @@ }

package.json

 {
   "name": "react-ts-typewriter",
-  "version": "0.1.6",
+  "version": "0.1.7a",
   "description": "React typewriter component written in TypeScript with React 18",
@@ -5,0 +5,0 @@ "main": "dist/Typewriter.js",

README.md

@@ -1,3 +0,20 @@
-# How to use Typewriter component
+# 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.7-green)
+![https://www.npmjs.com/package/react-ts-typewriter](https://img.shields.io/badge/package-npm-red)
+
+![](/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).
+
+## Installation
+
+```sh
+npm i react-ts-typewriter
+```
+
+## Example usage
+
 ```tsx
@@ -29,2 +46,35 @@ import Typewriter from 'react-ts-typewriter';
 }
-```
+```
+
+## Props
+> text : string | string[]
+
+Text to display as string or an array of strings. **Required** 
+
+> speed?: number = 30
+
+How long (in ms) does the the typewriter wait after typing one character. *Defaults to 30ms*.
+
+> loop?: boolean = false
+
+Set to true if the typewriter should loop after finishing typing the string(s). *Defaults to false*.
+
+> random?: number = 30
+
+Ms of randomness that should be added after each keystroke. If set to zero then each stroke will strictly take <code>speed</code>ms to complete. *Defaults to 30ms*.
+
+> delay?: number = 30
+
+Ms to wait after compleating the word. Useless if loop is set to false or text is not an array. *Defaults to 30ms*.
+
+> cursor?: boolean = true
+
+Set to false if the typewriter should not render a blinking cursor character at the end of the string. *Defaults to true*
+
+> onFinished?: Function = () => 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*. 

New alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

75954

increased by279.49%

Number of package files

11

increased by10%

Lines of code

287

increased by13.44%

Number of lines in readme file

79

increased by172.41%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes