react-ts-typewriter - npm Package Compare versions

Comparing version 0.1.6 to 0.1.7

dist/Typewriter.d.ts

@@ -9,3 +9,4 @@ /// <reference types="react" />
     cursor?: boolean;
+    onFinished?: 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 }: 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 = () => { } }) {
     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.7",
   "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.6-green)
+![https://www.npmjs.com/package/react-ts-typewriter](https://img.shields.io/badge/npm-published-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,31 @@ 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 word(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*

No alert changes

Improved metrics

Total package byte prevSize

183432

increased by816.47%

Number of package files

23

increased by130%

Lines of code

394

increased by55.73%

Number of lines in readme file

75

increased by158.62%

No dependency changes