react-text-swap-animation 1.4.0 → 1.5.0

package/README.md

@@ -65,26 +65,26 @@ API
 
 ### Props
 
-| Prop               | Type   | Default                                          | Description                                             |
-| :----------------- | :----- |:-------------------------------------------------| :------------------------------------------------------ |
-| `words`            | array  | `['Text Swap Animation', 'Antitoxin Swamp Tea']` | An array containing exactly 2 words which are an anagram of each other. |
-| `animationOptions` | object | `AnimationOptions`                               | Timing options for when to start, how fast to animate forwards, backwards, and when to loop (optional). |
-| `fontToObserve`    | string |                                                          | The name of an embedded font to wait until loaded.  If not specified, animation will loaded immediately (optional). |
+| Prop               | Type   | Default                                          | Description                                                                                                             |
+| :----------------- | :----- |:-------------------------------------------------|:------------------------------------------------------------------------------------------------------------------------|
+| `words`            | array  | `['Text Swap Animation', 'Antitoxin Swamp Tea']` | An array containing exactly 2 words which are an anagram of each other.                                                 |
+| `animationOptions` | object | `AnimationOptions`                               | Timing options for when to start, how fast to animate forwards, backwards, and when to loop (optional).                 |
+| `fontToObserve`    | string |                                                  | The name of an embedded font to wait until loaded.  If not specified, animation will be loaded immediately (optional).  |
 
 #### AnimationOptions
 
 All time values are in # of milliseconds.  The randomness allows a nice jumble effect.  You can use any values you want to create some fascinating animations.
 
-| Property           | Type   | Default | Description                                                                                   |
-| :------------------- | :----- | :------------ |:--------------------------------------------------------------------------------------------------------------------------------------|
-| `randomStartMin`     | number | `0`           | The minimum amount of time to randomly wait before starting to animate each letter.                                                   |
-| `randomStartMax`     | number | `3000`        | The maximum amount of time to randomly wait before starting to animate each letter. Should be `>= randomStartMin`.                    |
-| `randomReverseMin`   | number | `6000`        | The minimum amount of time to randomly wait before starting to animate each letter in reverse.                                        |
-| `randomReverseMax`   | number | `9000`        | The maximum amount of time to randomly wait before starting to animate each letter in reverse. Should be `>= randomReverseMin`.       |
-| `loopAnimation`      | number | `12000`       | The amount of time to wait before starting the next full loop of the animation. Should be `>= randomReverseMax + transitionDuration`. |
-| `waitToStart`        | number | `0`           | The amount of time to wait before beginning the animation on start up the first time.                                                 |
-| `transitionDuration` | number | `1000`        | How long should it take for a letter to move to its next position. Should be `<= randomReverseMin - randomStartMax`.                  |
-| `timingFunction`     | string | `ease-in-out` | What [timing function](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function) should be used for the animation.  |
+| Property           | Type   | Default | Description                                                                                                                            |
+| :------------------- | :----- | :------------ |:---------------------------------------------------------------------------------------------------------------------------------------|
+| `randomStartMin`     | number | `0`           | The minimum amount of time to randomly wait before starting to animate each letter.                                                    |
+| `randomStartMax`     | number | `3000`        | The maximum amount of time to randomly wait before starting to animate each letter. Should be `>= randomStartMin`.                     |
+| `randomReverseMin`   | number | `6000`        | The minimum amount of time to randomly wait before starting to animate each letter in reverse.                                         |
+| `randomReverseMax`   | number | `9000`        | The maximum amount of time to randomly wait before starting to animate each letter in reverse. Should be `>= randomReverseMin`.        |
+| `loopAnimation`      | number | `12000`       | The amount of time to wait before starting the next full loop of the animation. Should be `>= randomReverseMax + transitionDuration`.  |
+| `waitToStart`        | number | `0`           | The amount of time to wait before beginning the animation on start up the first time.                                                  |
+| `transitionDuration` | number | `1000`        | How long should it take for a letter to move to its next position. Should be `<= randomReverseMin - randomStartMax`.                   |
+| `timingFunction`     | string | `ease-in-out` | What [timing function](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function) should be used for the animation.   |
 
 Run Locally
 ----

package/dist/components/TextSwap.js

@@ -1,21 +1,24 @@
 "use strict";
 
-require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.iterator.filter.js");
+require("core-js/modules/es.iterator.for-each.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = TextSwap;
+require("core-js/modules/es.error.cause.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.iterator.constructor.js");
+require("core-js/modules/es.iterator.map.js");
 require("core-js/modules/web.dom-collections.iterator.js");
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _utils = require("../utils");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-/**
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /* eslint-disable react/no-array-index-key */ /**
  * Render and animate from one word to another word and back again.
  *
  * @param {[{string}]} words The 2 words to animate between.
@@ -170,56 +173,60 @@ function TextSwap(_ref) {
       animateFunc();
     }, waitToStart);
   }, [lettersRefs1, lettersRefs2, loopAnimation, updateAnimation, randomReverseMax, randomReverseMin, randomStartMax, randomStartMin, waitToStart, transitionDuration, timingFunction, words]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "text-swap"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "word word-1 hidden"
-  }, [...words[0]].map((letter, i) => {
-    return /*#__PURE__*/_react.default.createElement("span", {
-      ref: lettersRefs1.current[i],
-      className: "letter",
-      key: "".concat(i).concat(letter)
-    }, letter);
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "word word-2 hidden"
-  }, [...words[1]].map((letter, i) => {
-    return /*#__PURE__*/_react.default.createElement("span", {
-      ref: lettersRefs2.current[i],
-      className: "letter",
-      key: "".concat(i).concat(letter)
-    }, letter);
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "word word-animation"
-  }, swapAnimations.map(renderedLetter => {
-    const {
-      id,
-      letter,
-      playing,
-      disappear,
-      src,
-      dest
-    } = renderedLetter;
-    let letterStyles = {
-      transition: "left ".concat(transitionDuration, "ms ").concat(timingFunction, ", top ").concat(transitionDuration, "ms ").concat(timingFunction)
-    };
-    if (playing) {
-      const left = "".concat(dest.rect.x, "px");
-      letterStyles = _objectSpread(_objectSpread({}, letterStyles), {}, {
-        left
-      });
-    } else {
-      const left = "".concat(src.rect.x, "px");
-      letterStyles = _objectSpread(_objectSpread({}, letterStyles), {}, {
-        left
-      });
-    }
-    if (disappear) {
-      letterStyles.opacity = 0;
-    }
-    return /*#__PURE__*/_react.default.createElement("span", {
-      key: id,
-      className: "letter",
-      style: letterStyles
-    }, letter);
-  })));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "text-swap",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "word word-1 hidden",
+      children: [...words[0]].map((letter, i) => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          ref: lettersRefs1.current[i],
+          className: "letter",
+          children: letter
+        }, "".concat(i).concat(letter));
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "word word-2 hidden",
+      children: [...words[1]].map((letter, i) => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          ref: lettersRefs2.current[i],
+          className: "letter",
+          children: letter
+        }, "".concat(i).concat(letter));
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "word word-animation",
+      children: swapAnimations.map(renderedLetter => {
+        const {
+          id,
+          letter,
+          playing,
+          disappear,
+          src,
+          dest
+        } = renderedLetter;
+        let letterStyles = {
+          transition: "left ".concat(transitionDuration, "ms ").concat(timingFunction, ", top ").concat(transitionDuration, "ms ").concat(timingFunction)
+        };
+        if (playing) {
+          const left = "".concat(dest.rect.x, "px");
+          letterStyles = _objectSpread(_objectSpread({}, letterStyles), {}, {
+            left
+          });
+        } else {
+          const left = "".concat(src.rect.x, "px");
+          letterStyles = _objectSpread(_objectSpread({}, letterStyles), {}, {
+            left
+          });
+        }
+        if (disappear) {
+          letterStyles.opacity = 0;
+        }
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "letter",
+          style: letterStyles,
+          children: letter
+        }, id);
+      })
+    })]
+  });
 }

package/dist/components/constants.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DEFAULT_WORDS = exports.DEFAULT_ANIMATION_OPTIONS = void 0;
-const DEFAULT_WORDS = ['Text Swap Animation', 'Antitoxin Swamp Tea'];
+const DEFAULT_WORDS = exports.DEFAULT_WORDS = ['Text Swap Animation', 'Antitoxin Swamp Tea'];
 
 /**
  * @typedef AnimationOptions Timing options for when to start, how fast to animate forwards, backwards, and when to loop.
@@ -19,8 +19,7 @@ const DEFAULT_WORDS = ['Text Swap Animation', 'Antitoxin Swamp Tea'];
  */
 
 /** @type AnimationOptions */
-exports.DEFAULT_WORDS = DEFAULT_WORDS;
-const DEFAULT_ANIMATION_OPTIONS = {
+const DEFAULT_ANIMATION_OPTIONS = exports.DEFAULT_ANIMATION_OPTIONS = {
   randomStartMin: 0,
   randomStartMax: 3000,
   randomReverseMin: 6000,
@@ -29,5 +28,4 @@ const DEFAULT_ANIMATION_OPTIONS = {
   waitToStart: 0,
   transitionDuration: 1000,
   timingFunction: 'ease-in-out'
-};
-exports.DEFAULT_ANIMATION_OPTIONS = DEFAULT_ANIMATION_OPTIONS;
+};

package/dist/components/index.css

@@ -1,32 +1,34 @@
-.text-swap {
-    color: #fff;
-    flex: 0 0 auto;
-    align-self: center;
-    width: 100%;
-    height: 100%;
-    margin: 0 auto;
-    text-align: left;
-    text-transform: uppercase;
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-    position: relative; }
-
-.text-swap .word {
-    position: relative; }
-
-.text-swap .word.hidden {
-    position: absolute;
-    visibility: hidden;
-    z-index: -9000; }
-
-.text-swap .word .letter {
-    white-space: pre;
-    z-index: 10;
-    display: inline-block; }
-
-.text-swap .word-animation .letter {
-    z-index: 10;
-    position: absolute;
-    /*transition: all, 2s, cubic-bezier(0.1, 0.7, 1.0, 0.1), 2s;*/
-    transition: all, 2s, ease-in-out, 2s; }
+.text-swap {
+  color: #fff;
+  flex: 0 0 auto;
+  align-self: center;
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  text-align: left;
+  text-transform: uppercase;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  position: relative;
+}
+.text-swap .word {
+  position: relative;
+}
+.text-swap .word.hidden {
+  position: absolute;
+  visibility: hidden;
+  z-index: -9000;
+}
+.text-swap .word .letter {
+  white-space: pre;
+  z-index: 10;
+  display: inline-block;
+}
+.text-swap .word-animation .letter {
+  z-index: 10;
+  position: absolute;
+  transition: left 2s ease-in-out, top 2s ease-in-out;
+}
+
+/*# sourceMappingURL=index.css.map */

package/dist/components/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAKJ;EACI;EACA;EACA","file":"index.css"}

package/dist/components/index.js

@@ -1,22 +1,25 @@
 "use strict";
 
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.iterator.constructor.js");
+require("core-js/modules/es.iterator.filter.js");
+require("core-js/modules/es.iterator.for-each.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Loader;
-require("core-js/modules/es.symbol.description.js");
-var _react = _interopRequireDefault(require("react"));
+require("core-js/modules/es.error.cause.js");
 var _useFonts = _interopRequireDefault(require("./useFonts"));
 var _TextSwap = _interopRequireDefault(require("./TextSwap"));
 var _constants = require("./constants");
 require("./index.css");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-/**
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /**
  * Render and animate from one word to another word and back again.
  * @param {[string]} [words] The 2 words to animate between.
  * @param {AnimationOptions} [animationOptions] Timing options for when to start, how fast to animate forwards, backwards, and when to loop.
@@ -36,7 +39,7 @@ function Loader(_ref) {
   const maxLength = Math.max(word1.length, word2.length);
   word1 = word1.padEnd(maxLength, ' ');
   word2 = word2.padEnd(maxLength, ' ');
-  return isFontLoaded ? /*#__PURE__*/_react.default.createElement(_TextSwap.default, {
+  return isFontLoaded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextSwap.default, {
     words: [word1, word2],
     animationOptions: animOptions
   }) : null;

package/dist/components/useFonts.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = useFonts;
-require("core-js/modules/web.dom-collections.iterator.js");
 require("core-js/modules/es.promise.js");
+require("core-js/modules/web.dom-collections.iterator.js");
 var _react = require("react");
 function useFonts() {
   for (var _len = arguments.length, fontNames = new Array(_len), _key = 0; _key < _len; _key++) {

package/dist/index.js

@@ -5,6 +5,5 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _index = _interopRequireDefault(require("./components/index"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _index.default;
-exports.default = _default;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _index.default;

package/dist/utils.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.randomMinMax = randomMinMax;
 exports.uuidv4 = uuidv4;
 require("core-js/modules/es.regexp.exec.js");
-require("core-js/modules/es.string.replace.js");
 require("core-js/modules/es.regexp.to-string.js");
+require("core-js/modules/es.string.replace.js");
 /**
  * Get a random number between `min` and `max`
  * @param {number} min The minimum number you want to include in the random output

package/package.json

@@ -1,20 +1,20 @@
 {
     "name": "react-text-swap-animation",
-    "version": "1.4.0",
+    "version": "1.5.0",
     "author": "Scott Canoni",
     "description": "A React component to use CSS animations to swap letters in 2 words. The text is animated in position after calculating initial and final positions of each letter.  Words which are anagrams will animate well, but you can use any words or phrases.",
     "license": "WTFPL",
     "main": "dist/index.js",
+    "files": [
+        "dist"
+    ],
     "private": false,
     "scripts": {
-        "analyze": "source-map-explorer 'build/static/js/*.js'",
-        "start-js": "react-scripts start",
-        "start": "npm-run-all -p watch-css start-js",
-        "build": "del /Q dist\\* && NODE_ENV=production babel src/lib --out-dir dist --copy-files",
-        "build-fresh": "NODE_ENV=production babel src/lib --out-dir dist --copy-files",
-        "build-css": "sass src/:src/",
-        "watch-css": "sass --watch src/:src/",
-        "eject": "react-scripts eject"
+        "start": "vite",
+        "build-demo": "vite build --outDir demo-build",
+        "preview": "vite preview --outDir demo-build",
+        "build": "rimraf dist && cross-env NODE_ENV=production babel src/lib --out-dir dist --copy-files",
+        "build-css": "sass src/:src/"
     },
     "repository": {
         "type": "git",
@@ -29,26 +29,30 @@
         "rearrange"
     ],
     "dependencies": {
-        "core-js": "^3.18.3"
+        "core-js": "^3.49.0"
     },
     "peerDependencies": {
-        "react": "^17.0.2 || ^18.2.0",
-        "react-dom": "^17.0.2 || ^18.2.0"
+        "react": "^17.0.0 || ^18.0.0 || >=19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || >=19.0.0"
     },
     "devDependencies": {
-        "@babel/cli": "^7.20.7",
-        "@babel/core": "^7.20.12",
-        "@babel/polyfill": "^7.12.1",
-        "@babel/preset-env": "^7.15.6",
-        "@babel/preset-react": "^7.14.5",
-        "npm-run-all": "^4.1.5",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
-        "react-scripts": "4.0.3",
-        "sass": "^1.57.1"
-    },
-    "eslintConfig": {
-        "extends": "react-app"
+        "@babel/cli": "^7.28.6",
+        "@babel/core": "^7.29.0",
+        "@babel/eslint-parser": "^7.28.6",
+        "@babel/preset-env": "^7.29.2",
+        "@babel/preset-react": "^7.28.5",
+        "@vitejs/plugin-react": "^6.0.1",
+        "cross-env": "^10.1.0",
+        "eslint": "^8.57.1",
+        "eslint-plugin-import": "^2.32.0",
+        "eslint-plugin-jsx-a11y": "^6.10.2",
+        "eslint-plugin-react": "^7.37.5",
+        "eslint-plugin-react-hooks": "^4.6.2",
+        "react": "^19.2.4",
+        "react-dom": "^19.2.4",
+        "rimraf": "^6.1.3",
+        "sass": "^1.98.0",
+        "vite": "^8.0.3"
     },
     "browserslist": {
         "production": [

package/.eslintrc.js

@@ -1,74 +0,0 @@
-module.exports = {
-    extends: [
-        'react-app',
-        'react-app/jest',
-    ],
-    rules: {
-        indent: ['warn', 4],
-        'react/jsx-indent': ['warn', 4],
-        'react/jsx-indent-props': ['warn', 4],
-        quotes: [0, 'double', { avoidEscape: true }],
-        'quote-props': ['error', 'as-needed'],
-        'jsx-quotes': [2, 'prefer-double'],
-        'no-undef': 2,
-        'id-length': 0,
-        'max-len': 0,
-        'brace-style': [
-            1,
-            'stroustrup',
-            { allowSingleLine: true },
-        ],
-        curly: 2,
-        'no-use-before-define': [
-            1,
-            'nofunc',
-        ],
-        'no-unused-vars': [
-            1,
-            {
-                args: 'none',
-                ignoreRestSiblings: true,
-            },
-        ],
-        'arrow-body-style': 0,
-        'no-unused-expressions': [
-            2,
-            { allowShortCircuit: true },
-        ],
-        'object-curly-spacing': ['warn', 'always', { objectsInObjects: true }],
-        'object-curly-newline': ['warn', { multiline: true }],
-        'prefer-const': 'warn',
-        'no-restricted-syntax': [
-            1,
-            'WithStatement',
-            'DebuggerStatement',
-        ],
-        'no-underscore-dangle': 0,
-        'react/jsx-boolean-value': 0,
-        'react/jsx-first-prop-new-line': 0,
-        'react/jsx-no-bind': 0,
-        'react/no-did-mount-set-state': 0,
-        'react/prefer-stateless-function': 0,
-        'react/jsx-one-expression-per-line': [0],
-        // Allow jsx tags inside .js files.
-        'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
-        // Disable props spreading (<App {...props} />) warning.
-        'react/jsx-props-no-spreading': 0,
-        // Throw warning instead of error when using array index as a key.
-        'react/no-array-index-key': 1,
-        // Allow using (props) => <Component /> and ({propName}) => <Component /> syntax.
-        'react/destructuring-assignment': 'off',
-        // Disable <Fragment> => <> replacement. Feel free to change
-        'react/jsx-fragments': 'off',
-        // Allow modules with named exports only.
-        'import/prefer-default-export': 0,
-        // Throw warning when <a href="#"> or <a href="javascript:void(0)"> are used. Use <button> instead.
-        'jsx-a11y/anchor-is-valid': ['off', { aspects: ['invalidHref'] }],
-    },
-    // DeprecationWarning: The 'ecmaFeatures' config file property is deprecated and has no effect. (found in ".eslintrc.js")
-    // ecmaFeatures: {
-    //     jsx: true,
-    //     modules: true,
-    // },
-    parser: 'babel-eslint',
-};

package/.github/workflows/greetings.yml

@@ -1,16 +0,0 @@
-name: Greetings
-
-on: [pull_request, issues]
-
-jobs:
-  greeting:
-    runs-on: ubuntu-latest
-    permissions:
-      issues: write
-      pull-requests: write
-    steps:
-    - uses: actions/first-interaction@v1
-      with:
-        repo-token: ${{ secrets.GITHUB_TOKEN }}
-        issue-message: 'Hey, thanks for raising this issue!'
-        pr-message: 'You are so AWESOME for chipping in and helping out.  Thanks!  Keep up the GOOD WORK!'

package/.github/workflows/node.js.yml

@@ -1,46 +0,0 @@
-# This is a basic workflow to help you get started with Actions
-
-name: CI
-
-# Controls when the workflow will run
-on:
-  # Triggers the workflow on push or pull request events but only for the main branch
-  push:
-    branches: [ main ]
-  pull_request:
-    branches: [ main ]
-
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
-
-# A workflow run is made up of one or more jobs that can run sequentially or in parallel
-jobs:
-  # This workflow contains a single job called "build"
-  build:
-    # The type of runner that the job will run on
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [ 14.x, 16.x, 18.x ]
-        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-
-    # Steps represent a sequence of tasks that will be executed as part of the job
-    steps:
-      - uses: actions/checkout@v3
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: 'npm'
-      # Runs a single command using the runners shell
-      - name: Run a one-line script
-        run: echo Building now...
-
-#      - name: Install python2
-#        run: apt update && DEBIAN_FRONTEND=noninteractive apt install -y python2 make g++
-#      - name: Test python2
-#        run: python2 --version
-#      - run: npm install sass node-sass@4.14.1
-      - run: npm i
-      - run: npm run build-fresh --if-present

package/babel.config.json

@@ -1,18 +0,0 @@
-{
-    "presets": [
-        [
-            "@babel/env",
-            {
-                "targets": {
-                    "edge": "17",
-                    "firefox": "60",
-                    "chrome": "67",
-                    "safari": "11.1"
-                },
-                "useBuiltIns": "usage",
-                "corejs": "3.6.5"
-            }
-        ],
-        "@babel/preset-react"
-    ]
-}

package/dist/components/Anagram.js

@@ -1,156 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Anagram;
-
-require("core-js/modules/web.dom-collections.iterator.js");
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _utils = require("../utils");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-/**
- * Render and animate from one word to another word and back again.
- *
- * @param {[{string}]} words The 2 words to animate between.
- * @param {AnimationOptions} animationOptions Timing options for when to start, how fast forward/backwards, and when to loop.
- * @returns {JSX.Element}
- */
-function Anagram(_ref) {
-  let {
-    words,
-    animationOptions
-  } = _ref;
-  const lettersRefs1 = (0, _react.useRef)([...words[0]].map(() => /*#__PURE__*/(0, _react.createRef)()));
-  const lettersRefs2 = (0, _react.useRef)([...words[1]].map(() => /*#__PURE__*/(0, _react.createRef)()));
-  const [swapAnimations, setSwapAnimations] = (0, _react.useState)({});
-  const playAnimation = (0, _react.useCallback)(function (i) {
-    let playing = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    setSwapAnimations(prevState => {
-      return _objectSpread(_objectSpread({}, prevState), {}, {
-        [i]: _objectSpread(_objectSpread({}, prevState[i]), {}, {
-          playing
-        })
-      });
-    });
-  }, [setSwapAnimations]);
-  const {
-    randomStartMin,
-    randomStartMax,
-    randomReverseMin,
-    randomReverseMax,
-    loopAnimation,
-    waitToStart
-  } = animationOptions;
-  (0, _react.useEffect)(() => {
-    const swaps = [];
-    const destLettersPairedByIndex = [];
-    [...words[0]].forEach((letter, i) => {
-      // Find a matching dest character to execute the swap with
-      const destLetterIndex = [...words[1]].findIndex((destLetter, srcIndex) => {
-        return destLetter.toLowerCase() === letter.toLowerCase() && destLettersPairedByIndex[srcIndex] !== true;
-      });
-      destLettersPairedByIndex[destLetterIndex] = true; // mark this source paired/used
-
-      if (destLetterIndex === -1) {
-        throw new Error("Not sure how to animate since all source letters were paired already, disappear maybe?");
-      } // If the text wraps then the offset left isn't correct.
-
-
-      const swap = {
-        src: {
-          letter,
-          element: lettersRefs1.current[i].current,
-          offsetLeft: lettersRefs1.current[i].current.offsetLeft,
-          offsetTop: lettersRefs1.current[i].current.offsetTop // rect: lettersRefs1.current[i].current.getBoundingClientRect(),
-
-        },
-        dest: {
-          letter: words[1][destLetterIndex],
-          element: lettersRefs2.current[destLetterIndex].current,
-          offsetLeft: lettersRefs2.current[destLetterIndex].current.offsetLeft,
-          offsetTop: lettersRefs2.current[destLetterIndex].current.offsetTop // rect: lettersRefs2.current[destLetterIndex].current.getBoundingClientRect(),
-
-        }
-      };
-      swaps.push(swap);
-    });
-    setSwapAnimations(swaps);
-
-    const animateFunc = () => {
-      swaps.forEach((swap, i) => {
-        // Animate each character towards the destination
-        setTimeout(() => {
-          playAnimation(i);
-        }, (0, _utils.randomMinMax)(randomStartMin, randomStartMax)); // Animate each character back to their original location
-
-        setTimeout(() => {
-          playAnimation(i, false);
-        }, (0, _utils.randomMinMax)(randomReverseMin, randomReverseMax));
-      }); // Repeat forever
-
-      setTimeout(() => {
-        animateFunc();
-      }, loopAnimation);
-    }; // Start the process
-
-
-    setTimeout(() => {
-      animateFunc();
-    }, waitToStart);
-  }, [lettersRefs1, lettersRefs2, loopAnimation, playAnimation, randomReverseMax, randomReverseMin, randomStartMax, randomStartMin, waitToStart, words]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "anagram-swap"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "word word-1 hidden"
-  }, [...words[0]].map((letter, i) => {
-    return /*#__PURE__*/_react.default.createElement("span", {
-      ref: lettersRefs1.current[i],
-      className: "letter",
-      key: "".concat(i).concat(letter)
-    }, letter);
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "word word-2 hidden"
-  }, [...words[1]].map((letter, i) => {
-    return /*#__PURE__*/_react.default.createElement("span", {
-      ref: lettersRefs2.current[i],
-      className: "letter",
-      key: "".concat(i).concat(letter)
-    }, letter);
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "word word-animation"
-  }, [...words[0]].map((letter, i) => {
-    let letterStyles = {};
-    const swap = swapAnimations[i];
-
-    if (swap && swap.playing) {
-      const left = "".concat(swap.dest.offsetLeft - swap.src.offsetLeft, "px");
-      const top = "".concat(swap.dest.offsetTop - swap.src.offsetTop, "px"); // Trying to fix issue with wrapped text
-      // const left = `${swap.dest.rect.x - swap.src.rect.x}px`;
-      // const top = `${swap.dest.rect.y - swap.src.rect.y}px`;
-
-      letterStyles = {
-        left,
-        top
-      };
-    }
-
-    return /*#__PURE__*/_react.default.createElement("span", {
-      key: "".concat(i).concat(letter),
-      className: "letter",
-      style: letterStyles
-    }, letter);
-  })));
-}

package/public/index.html

@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta name="description"
-        content="A React component to use CSS animations to swap letters in 2 words. The text is animated in position after calculating initial and final positions of each letter.  Words which are anagrams will animate well, but you can use any words or phrases." />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <title>React Text Swap Animation</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
-</head>
-<body>
-<div id="root"></div>
-</body>
-</html>

package/src/App.css

@@ -1,12 +0,0 @@
-body {
-    background-color: #1c3d65;
-    color: #fff;
-    font-family: 'Open Sans', sans-serif;
-
-    font-size: 42px;
-    font-weight: bold;
-}
-
-.text-swap .word {
-    white-space: pre;
-}

package/src/index.js

@@ -1,44 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import TextSwap from './lib/components';
-import './App.css';
-
-ReactDOM.render(
-    <React.StrictMode>
-        <div>
-            <h1>React Text Swap Animation</h1>
-            <h2>Demo</h2>
-
-            <TextSwap fontToObserve="Open Sans" />
-
-            <br />
-            <br />
-
-            <TextSwap fontToObserve="Open Sans" words={['a witty saying', 'proves nothing']} />
-
-            <br />
-            <br />
-
-            <TextSwap fontToObserve="Open Sans" words={['don\'t be sad it\'s over', 'be happy that it happened']} />
-
-            <br />
-            <br />
-
-            <TextSwap fontToObserve="Open Sans" words={['debit card', 'bad credit']} />
-            <br />
-            <br />
-
-            <TextSwap fontToObserve="Open Sans" words={['debit card', 'bad credit']} animationOptions={{
-                randomStartMin: 0,
-                randomStartMax: 3000,
-                randomReverseMin: 12000,
-                randomReverseMax: 12000,
-                loopAnimation: 20000,
-                waitToStart: 0,
-                transitionDuration: 4000,
-                timingFunction: 'cubic-bezier(0.2,-2,0.8,2)'
-            }} />
-        </div>
-    </React.StrictMode>,
-    document.getElementById('root'),
-);

package/src/lib/components/TextSwap.jsx

@@ -1,201 +0,0 @@
-/* eslint-disable react/no-array-index-key */
-import React, { createRef, useCallback, useEffect, useRef, useState } from 'react';
-import { randomMinMax, uuidv4 } from '../utils';
-
-/**
- * Render and animate from one word to another word and back again.
- *
- * @param {[{string}]} words The 2 words to animate between.
- * @param {AnimationOptions} animationOptions Timing options for when to start, how fast forward/backwards, and when to loop.
- * @returns {JSX.Element}
- */
-export default function TextSwap({ words, animationOptions }) {
-    const [swapAnimations, setAnimations] = useState([]);
-    const lettersRefs1 = useRef([...words[0]].map(() => createRef()));
-    const lettersRefs2 = useRef([...words[1]].map(() => createRef()));
-    const updateAnimation = useCallback((i, update = {}) => {
-        setAnimations((prevState) => {
-            const newState = [
-                ...prevState,
-            ];
-            newState[i] = {
-                ...prevState[i],
-                ...update,
-            };
-
-            return newState;
-        });
-    }, [setAnimations]);
-
-    const {
-        randomStartMin,
-        randomStartMax,
-        randomReverseMin,
-        randomReverseMax,
-        loopAnimation,
-        waitToStart,
-        transitionDuration,
-        timingFunction,
-    } = animationOptions;
-
-    useEffect(() => {
-        const swaps = [];
-        const destLettersPairedByIndex = [];
-
-        [...words[0]].forEach((letter, i) => {
-            // Find a matching destination character to execute the swap with
-            let destLetterIndex = [...words[1]].findIndex((destLetter, srcIndex) => {
-                return destLetter.toLowerCase() === letter.toLowerCase()
-                        && destLettersPairedByIndex[srcIndex] !== true;
-            });
-
-            // If no matching character
-            if (destLetterIndex === -1) {
-                // Find a space to swap with
-                destLetterIndex = [...words[1]].findIndex((destLetter, srcIndex) => {
-                    return destLetter === ' ' && destLettersPairedByIndex[srcIndex] !== true;
-                });
-
-                // If there was no space, find first non-used space
-                if (destLetterIndex === -1) {
-                    destLetterIndex = [...words[1]].findIndex((destLetter, srcIndex) => {
-                        return destLettersPairedByIndex[srcIndex] !== true;
-                    });
-                }
-            }
-
-            if (destLetterIndex === -1) {
-                throw new Error(`Not sure how to animate since all source letters were paired already, disappear maybe?`);
-            }
-
-            destLettersPairedByIndex[destLetterIndex] = true; // mark this source paired/used
-
-            // If the text wraps then the offset left isn't correct.
-            const swap = {
-                id: uuidv4(), // for a unique key
-                letter, // the displayed letter
-                playing: false, // if this letter is animating to the destination
-                disappear: false, // if this letter should disappear (temporarily)
-                // the source location, starting place and letter
-                src: {
-                    letter: words[0][i],
-                    element: lettersRefs1.current[i].current,
-                    offsetLeft: lettersRefs1.current[i].current.offsetLeft,
-                    offsetTop: lettersRefs1.current[i].current.offsetTop,
-                    rect: lettersRefs1.current[i].current.getBoundingClientRect(),
-                },
-                // the destination location and letter
-                dest: {
-                    letter: words[1][destLetterIndex],
-                    element: lettersRefs2.current[destLetterIndex].current,
-                    offsetLeft: lettersRefs2.current[destLetterIndex].current.offsetLeft,
-                    offsetTop: lettersRefs2.current[destLetterIndex].current.offsetTop,
-                    rect: lettersRefs2.current[destLetterIndex].current.getBoundingClientRect(),
-                },
-            };
-            swaps.push(swap);
-        });
-
-        setAnimations(swaps);
-
-        const animateFunc = () => {
-            swaps.forEach((swap, i) => {
-                // Animate each character towards the destination
-                const forwardStartTime = randomMinMax(randomStartMin, randomStartMax);
-                setTimeout(() => {
-                    updateAnimation(i, { playing: true, disappear: false });
-                    if (swap.src.letter !== ' ' && swap.dest.letter === ' ') {
-                        updateAnimation(i, { disappear: true });
-                    }
-                }, forwardStartTime);
-
-                // Halfway towards the destination, switch to the destination letter
-                setTimeout(() => {
-                    if (swap.src.letter !== ' ' && swap.dest.letter === ' ') {
-                        // do nothing
-                    }
-                    else {
-                        updateAnimation(i, { letter: swap.dest.letter });
-                    }
-                }, forwardStartTime + 500);
-
-
-                // Animate each character back to their original location
-                const reverseStartTime = randomMinMax(randomReverseMin, randomReverseMax);
-                setTimeout(() => {
-                    updateAnimation(i, { playing: false, disappear: false });
-                    if (swap.dest.letter !== ' ' && swap.src.letter === ' ') {
-                        updateAnimation(i, { disappear: true });
-                    }
-                }, reverseStartTime);
-
-                // Half way back to the initial location, switch to the initial letter
-                setTimeout(() => {
-                    if (swap.dest.letter !== ' ' && swap.src.letter === ' ') {
-                        // do nothing
-                    }
-                    else {
-                        updateAnimation(i, { letter: swap.src.letter });
-                    }
-                }, reverseStartTime + 500);
-            });
-
-            // Repeat forever
-            setTimeout(() => {
-                animateFunc();
-            }, loopAnimation);
-        };
-
-        // Start the process
-        setTimeout(() => {
-            animateFunc();
-        }, waitToStart);
-
-    }, [lettersRefs1, lettersRefs2, loopAnimation, updateAnimation, randomReverseMax, randomReverseMin, randomStartMax, randomStartMin, waitToStart, transitionDuration, timingFunction, words]);
-
-    return (
-        <div className="text-swap">
-            <div className="word word-1 hidden">
-                {
-                    [...words[0]].map((letter, i) => {
-                        return <span ref={lettersRefs1.current[i]} className="letter" key={`${i}${letter}`}>{letter}</span>;
-                    })
-                }
-            </div>
-            <div className="word word-2 hidden">
-                {
-                    [...words[1]].map((letter, i) => {
-                        return <span ref={lettersRefs2.current[i]} className="letter" key={`${i}${letter}`}>{letter}</span>;
-                    })
-                }
-            </div>
-            <div className="word word-animation">
-                {
-                    swapAnimations.map((renderedLetter) => {
-                        const { id, letter, playing, disappear, src, dest } = renderedLetter;
-
-                        let letterStyles = { transition: `left ${transitionDuration}ms ${timingFunction}, top ${transitionDuration}ms ${timingFunction}` };
-                        if (playing) {
-                            const left = `${dest.rect.x}px`;
-                            letterStyles = { ...letterStyles, left };
-                        }
-                        else {
-                            const left = `${src.rect.x}px`;
-                            letterStyles = { ...letterStyles, left };
-                        }
-
-                        if (disappear) {
-                            letterStyles.opacity = 0;
-                        }
-
-                        return (
-                            <span key={id} className="letter" style={letterStyles}>
-                                {letter}
-                            </span>
-                        );
-                    })
-                }
-            </div>
-        </div>
-    );
-}

package/src/lib/components/constants.js

@@ -1,25 +0,0 @@
-export const DEFAULT_WORDS = ['Text Swap Animation', 'Antitoxin Swamp Tea'];
-
-/**
- * @typedef AnimationOptions Timing options for when to start, how fast to animate forwards, backwards, and when to loop.
- * @property {number} randomStartMin The minimum amount of time to randomly wait before starting to animate each letter.
- * @property {number} randomStartMax The maximum amount of time to randomly wait before starting to animate each letter. Should be `>= randomStartMin`.
- * @property {number} randomReverseMin The minimum amount of time to randomly wait before starting to animate each letter in reverse.
- * @property {number} randomReverseMax The maximum amount of time to randomly wait before starting to animate each letter in reverse. Should be `>= randomReverseMin`.
- * @property {number} loopAnimation The amount of time to wait before starting the next full loop of the animation. Should be `>= randomReverseMax + transitionDuration`.
- * @property {number} waitToStart The amount of time to wait before beginning the animation on start up the first time.
- * @property {number} transitionDuration How long should it take for a letter to move to its next position. Should be `<= randomReverseMin - randomStartMax`.
- * @property {string} timingFunction What [timing function](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function) should be used for the animation.
- */
-
-/** @type AnimationOptions */
-export const DEFAULT_ANIMATION_OPTIONS = {
-    randomStartMin: 0,
-    randomStartMax: 3000,
-    randomReverseMin: 6000,
-    randomReverseMax: 9000,
-    loopAnimation: 12000,
-    waitToStart: 0,
-    transitionDuration: 1000,
-    timingFunction: 'ease-in-out',
-};

package/src/lib/components/index.css

@@ -1,32 +0,0 @@
-.text-swap {
-    color: #fff;
-    flex: 0 0 auto;
-    align-self: center;
-    width: 100%;
-    height: 100%;
-    margin: 0 auto;
-    text-align: left;
-    text-transform: uppercase;
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-    position: relative; }
-
-.text-swap .word {
-    position: relative; }
-
-.text-swap .word.hidden {
-    position: absolute;
-    visibility: hidden;
-    z-index: -9000; }
-
-.text-swap .word .letter {
-    white-space: pre;
-    z-index: 10;
-    display: inline-block; }
-
-.text-swap .word-animation .letter {
-    z-index: 10;
-    position: absolute;
-    /*transition: all, 2s, cubic-bezier(0.1, 0.7, 1.0, 0.1), 2s;*/
-    transition: all, 2s, ease-in-out, 2s; }

package/src/lib/components/index.jsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import useFonts from './useFonts';
-import TextSwap from './TextSwap';
-import { DEFAULT_ANIMATION_OPTIONS, DEFAULT_WORDS } from './constants';
-
-import './index.css';
-
-/**
- * Render and animate from one word to another word and back again.
- * @param {[string]} [words] The 2 words to animate between.
- * @param {AnimationOptions} [animationOptions] Timing options for when to start, how fast to animate forwards, backwards, and when to loop.
- * @param {string} [fontToObserve] A description of an embedded font to observe and wait until loaded.
- * @returns {JSX.Element|null}
- */
-export default function Loader({ words = DEFAULT_WORDS, animationOptions = {}, fontToObserve }) {
-    const isFontLoaded = useFonts(fontToObserve);
-    const animOptions = {
-        ...DEFAULT_ANIMATION_OPTIONS,
-        ...animationOptions,
-    };
-
-    let word1 = words[0];
-    let word2 = words[1];
-    const maxLength = Math.max(word1.length, word2.length);
-    word1 = word1.padEnd(maxLength, ' ');
-    word2 = word2.padEnd(maxLength, ' ');
-
-    return isFontLoaded ? <TextSwap words={[word1, word2]} animationOptions={animOptions} /> : null;
-}

package/src/lib/components/index.scss

@@ -1,38 +0,0 @@
-.text-swap {
-    color: #fff;
-    flex: 0 0 auto;
-    align-self: center;
-    width: 100%;
-    height: 100%;
-    margin: 0 auto;
-    text-align: left;
-    text-transform: uppercase;
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-    position: relative;
-
-    .word {
-        position: relative;
-
-        &.hidden {
-            position: absolute;
-            visibility: hidden;
-            z-index: -9000;
-        }
-
-        .letter {
-            white-space: pre;
-            z-index: 10;
-            display: inline-block;
-        }
-    }
-
-    .word-animation {
-        .letter {
-            z-index: 10;
-            position: absolute;
-            transition: left 2s ease-in-out, top 2s ease-in-out;
-        }
-    }
-}

package/src/lib/components/useFonts.js

@@ -1,22 +0,0 @@
-import { useEffect, useState } from 'react';
-
-export default function useFonts(...fontNames) {
-    const [isLoaded, setIsLoaded] = useState(false);
-
-    useEffect(() => {
-        // Inspired by https://stackoverflow.com/a/60138011
-        if (!document || !document.fonts) {
-            // eslint-disable-next-line no-console
-            console.warn('Browser does not support document.fonts API');
-            setIsLoaded(true);
-
-            return;
-        }
-
-        Promise.all(fontNames.map((fontName) => document.fonts.load(`16px "${fontName}"`))).then(() => {
-            setIsLoaded(true);
-        });
-    }, [fontNames]);
-
-    return isLoaded;
-};

package/src/lib/index.js

@@ -1,3 +0,0 @@
-import TextSwap from './components/index';
-
-export default TextSwap;

package/src/lib/utils.js

@@ -1,17 +0,0 @@
-/**
- * Get a random number between `min` and `max`
- * @param {number} min The minimum number you want to include in the random output
- * @param {number} max The maximum number you want to include in the random output
- * @returns {number} A random number including and between the `min` and `max`
- */
-export function randomMinMax(min = 0, max = 100) {
-    return Math.floor(Math.random() * (max - min)) + min;
-}
-
-export function uuidv4() {
-    return 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-        const r = (Math.random() * 16) | 0,
-            v = c === 'x' ? r : (r & 0x3) | 0x8;
-        return v.toString(16);
-    });
-}