react-type-animation - npm Package Compare versions

Comparing version 1.1.3 to 2.0.0

package.json

 {
   "name": "react-type-animation",
-  "version": "1.1.3",
+  "version": "2.0.0",
   "description": "React typing animation based on typical.",
@@ -8,10 +8,11 @@ "author": "max37",
   "repository": "maxeth/react-type-animation",
-  "main": "dist/index.js",
-  "module": "dist/index.es.js",
-  "jsnext:main": "dist/index.es.js",
-  "engines": {
-    "node": ">=8",
-    "npm": ">=5"
-  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.es.js",
+  "jsnext:main": "dist/esm/index.es.js",
+  "files": [
+    "dist"
+  ],
+  "types": "dist/index.d.ts",
   "scripts": {
+    "rollup": "rollup -c",
     "build": "rollup -c",
@@ -41,3 +42,8 @@ "start": "rollup -c -w",
   "devDependencies": {
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^22.0.2",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-typescript": "^8.3.4",
     "@svgr/rollup": "^2.4.1",
+    "@types/react": "^18.0.16",
     "babel-core": "^6.26.3",
@@ -62,13 +68,11 @@ "babel-eslint": "^8.2.5",
     "react-scripts": "^1.1.4",
-    "rollup": "^0.64.1",
-    "rollup-plugin-babel": "^3.0.7",
-    "rollup-plugin-commonjs": "^9.1.3",
-    "rollup-plugin-node-resolve": "^3.3.0",
+    "rollup": "^2.77.2",
+    "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-peer-deps-external": "^2.2.0",
     "rollup-plugin-postcss": "^1.6.2",
-    "rollup-plugin-url": "^1.4.0"
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-url": "^1.4.0",
+    "tslib": "^2.4.0",
+    "typescript-plugin-css-modules": "^3.4.0"
   },
-  "files": [
-    "dist"
-  ],
   "dependencies": {
@@ -75,0 +79,0 @@ "@camwiegert/typical": "^0.1.1"

README.md

 # react-type-animation
 
-Customizable React typing animation component.
+A customizable React typing animation component.
 
-## Install
+## Installation
 
 ```bash
-npm install react-type-animation
+npm install --save react-type-animation
 ```
 
-Requires a ```react``` and ```react-dom``` version of at least 15.0.0.
+Requires a `react` and `react-dom` version of at least 15.0.0.
 
@@ -20,3 +20,3 @@ ## Live Demo
 ```jsx
-import TypeAnimation from 'react-type-animation';
+import { TypeAnimation } from 'react-type-animation';
 
@@ -27,4 +27,10 @@ const ExampleComponent = () => {
       cursor={false}
-      sequence={['React typing animation based on typical', 1000, '']}
+      sequence={[
+        'One', 1000, 'Two', 2000, 'Three',
+        () => {
+          console.log('Done typing!');
+        }
+      ]}
       wrapper="h2"
+      repeat={Infinity}
     />
@@ -37,24 +43,40 @@ );
 
-### Hot-Reload Bug
+### Immutability
 
-When using hot-reload, the type animation will most likely be bugged until you hard-reload the page.
-Until this issue is resolved, **you need to hard-reload the page after ever code change** in order to see the animation in a non-bugged state.
+Due to the nature of the animation, this component is **immutable once rendered**, which means that **props changes will never be reflected**. Otherwise, the animation would have to be reset completely, which would look unnatural.
 
-### Layout-shift
+Here is an example which shows that you cannot render dynamic prop-values:
 
-In order to prevent layout shift caused by the type animation's text HTML-element expanding, you need to either wrap the TextAnimation component in a div that has a fixed width/height which is wider than the maximum expansion of the TypeAnimation element, or make that wrapper div's position `absolute`.
+```jsx
+const [counter, setCounter] = useState(0)
+ <TypeAnimation
+      // DO NOT RENDER DYNAMIC VALUES!
+      sequence={[`${counter}`, 1000, () => {setCounter(counter++)}]} // ANIMATION WILL ALWAYS RENDER 0!
+      repeat={Infinity}
+    />
+```
 
+In the example above, `counter` will always render as "0" within the animation and ignore state changes.
 
-## Props
+### Hot Reload Bug
 
+Because Hot Reload preserves previous state but re-renders the component, the Animation will start bugging out until you **hard-reload the page**.
 
-| Prop        | Required | Type    | Example                | Description                                              |
-| ----------- | -------- | ------- | ---------------------- | -------------------------------------------------------- |
-| `sequence`  | yes      | array[] | `['One', 1000, 'Two']` | Animation sequence: TEXT followed by DELAY-IN-MS         |
-| `wrapper`   | no       | string  | `p`,`h2`,`div`         | HTML elements that Animation is wrapped around           |
-| `repeat`    | no       | number  | `3`, `Infinity`        | Amount of animation repetitions                          |
-| `cursor`    | no       | boolean | `false`, `true`        | Display blinking cursor css-animation                    |
-| `className` | no       | string  | `custom-class-name`    | HTML class name applied to the wrapper to style the text |
+Hence, whenever you make changes to the TypeAnimation component, you unfortunately have to reload your page.
 
+### Layout-shift
 
+In order to prevent layout shift caused by the TypeAnimation component's text expanding, when typing long texts, you need to either wrap the TextAnimation component in an HTML element with a fixed width/height which is wider than the maximum expansion of the TypeAnimation element, or make that wrapper's position `absolute`.
+
+## Props
+
+| Prop        | Required | Type    | Example                  | Description                                              | Default |
+| ----------- | -------- | ------- | ------------------------ | -------------------------------------------------------- | ------- |
+| `sequence`  | yes      | array[] | `['One', 1000, 'Two']`   | Animation Sequence: [TEXT, DELAY-MS, CALLBACK]           | `none`  |
+| `wrapper`   | no       | string  | `p`,`h2`,`div`, `strong` | HTML element tag that wraps the Animation                | `div`   |
+| `speed`     | no       | number  | `55`, `65`               | Speed Of Animation: The lower the slower                 | `65`    |
+| `repeat`    | no       | number  | `3`, `0`, `Infinity`     | Amount of animation repetitions                          | `0`     |
+| `cursor`    | no       | boolean | `false`, `true`          | Display default blinking cursor css-animation            | `true`  |
+| `className` | no       | string  | `custom-class-name`      | HTML class name applied to the wrapper to style the text | `none`  |
+
 ## Custom Cursor Animation
@@ -61,0 +83,0 @@

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

Improved metrics

Total package byte prevSize

95115

increased by234.1%

Number of package files

16

increased by128.57%

Lines of code

764

increased by211.84%

Number of lines in readme file

101

increased by27.85%

Worsened metrics

Dev dependency count

33

increased by22.22%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes