react-type-animation - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

dist/index.es.js

@@ -86,4 +86,4 @@ import React, { useRef, useEffect, memo } from 'react';
 
-var css = ".styles_type__RQhBT::after {\n  content: '|';\n  animation: styles_cursor__3rrQx 1.2s infinite step-start;\n}\n\n@keyframes styles_cursor__3rrQx {\n  50% {\n    opacity: 0;\n  }\n}\n";
-var styles = { "type": "styles_type__RQhBT", "cursor": "styles_cursor__3rrQx" };
+var css = ".styles_type__2Teeh::after {\n  content: '|';\n  animation: styles_cursor__14ty0 1.2s infinite step-start;\n}\n\n@keyframes styles_cursor__14ty0 {\n  50% {\n    opacity: 0;\n  }\n}\n";
+var styles = { "type": "styles_type__2Teeh", "cursor": "styles_cursor__14ty0" };
 styleInject(css);
@@ -111,3 +111,3 @@
   var typeRef = useRef(null);
-  var classNames = [styles.type];
+  var baseStyle = styles.type;
 
@@ -120,4 +120,3 @@ var finalClassName = void 0;
     } else {
-      classNames.push(className);
-      finalClassName = classNames.join(' ');
+      finalClassName = baseStyle + ' ' + className;
     }
@@ -127,2 +126,4 @@ } else {
       finalClassName = '';
+    } else {
+      finalClassName = baseStyle;
     }
@@ -129,0 +130,0 @@ }

dist/index.js

@@ -91,4 +91,4 @@ 'use strict';
 
-var css = ".styles_type__RQhBT::after {\n  content: '|';\n  animation: styles_cursor__3rrQx 1.2s infinite step-start;\n}\n\n@keyframes styles_cursor__3rrQx {\n  50% {\n    opacity: 0;\n  }\n}\n";
-var styles = { "type": "styles_type__RQhBT", "cursor": "styles_cursor__3rrQx" };
+var css = ".styles_type__2Teeh::after {\n  content: '|';\n  animation: styles_cursor__14ty0 1.2s infinite step-start;\n}\n\n@keyframes styles_cursor__14ty0 {\n  50% {\n    opacity: 0;\n  }\n}\n";
+var styles = { "type": "styles_type__2Teeh", "cursor": "styles_cursor__14ty0" };
 styleInject(css);
@@ -116,3 +116,3 @@
   var typeRef = React.useRef(null);
-  var classNames = [styles.type];
+  var baseStyle = styles.type;
 
@@ -125,4 +125,3 @@ var finalClassName = void 0;
     } else {
-      classNames.push(className);
-      finalClassName = classNames.join(' ');
+      finalClassName = baseStyle + ' ' + className;
     }
@@ -132,2 +131,4 @@ } else {
       finalClassName = '';
+    } else {
+      finalClassName = baseStyle;
     }
@@ -134,0 +135,0 @@ }

package.json

 {
   "name": "react-type-animation",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "⌨ React typing animation based on typical.",
@@ -18,3 +18,4 @@ "author": "max37",
     "start": "rollup -c -w",
-    "prepare": "npm run build"
+    "prepare": "npm run build",
+    "react-start": "react-scripts start"
   },
@@ -21,0 +22,0 @@ "keywords": [

README.md

@@ -31,7 +31,8 @@ # react-type-animation
 
-| Prop       | Required | Type    | Example                | Description                                          |
-| ---------- | -------- | ------- | ---------------------- | ---------------------------------------------------- |
-| `wrapper`  | no       | string  | `p`,`h2`,`div`         | Key of HTML element that animation is wrapped around |
-| `sequence` | yes      | []      | `['One', 1000, 'Two']` | Animation steps: [Text, Delay]                       |
-| `repeat`   | no       | number  | `5`,`Infinity`         | Amount of animation repetitions                      |
-| `cursor`   | no       | boolean | `false`, `true`        | Display blinking cursor in animation                 |
+| Prop        | Required | Type    | Example                | Description                                              |
+| ----------- | -------- | ------- | ---------------------- | -------------------------------------------------------- |
+| `steps`     | yes      | []      | `['One', 1000, 'Two']` | Animation steps: Text followed by delay                  |
+| `wrapper`   | no       | string  | `p`,`h2`,`div`         | HTML elements that Animation is wrapped around           |
+| `loop`      | no       | number  | `3`, `Infinity`        | Amount of animation repetitions                          |
+| `cursor`    | no       | boolean | `false`, `true`        | Display blinking cursor in animation                     |
+| `className` | no       | string  | `custom-class-name`    | HTML class name applied to the wrapper to style the text |

No alert changes

Improved metrics

Total package byte prevSize

25725

increased by0.69%

Lines of code

245

increased by0.82%

Number of lines in readme file

38

increased by2.7%

No dependency changes