react-text-swap-animation 1.3.0 → 1.5.0

package/README.md

@@ -45,22 +45,19 @@ To control the animation speed and timing, you can pass an object of `animationO
     randomReverseMax: 6000,
     loopAnimation: 20000,
     waitToStart: 5000,
+    transitionDuration: 2000,
+    timingFunction: 'ease-in-out',
 }} />
 ```
 
 If you are using an embedded font and need to wait for it to load before animating, 
-then you should specify the `fontToObserve` object with the font family name and/or other font specifics.
+then you should specify the `fontToObserve` property with the font family name.
 
 ```js
-<TextSwap fontToObserve={{ family: 'Open Sans' }} />
+<TextSwap fontToObserve="Open Sans" />
 ```
 ```js
-<TextSwap fontToObserve={{
-    family: 'Roboto',
-    weight: 600,
-    style: 'italic',
-    stretch: 'expanded',
-}} />
+<TextSwap fontToObserve="Roboto" />
 ```
 
 API
@@ -68,44 +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`    | object | `FontToObserve`                                  | A description of an embedded font to observe and 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
 
-| 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            |
-| `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 |
-| `loopAnimation`    | number | `12000` | The amount of time for each full loop of the animation                                        |
-| `waitToStart`      | number | `0`     | The amount of time to wait before beginning the animation on start up                         |
-
-#### FontToObserve
+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.
 
-This object is passed along to [Font Face Observer](https://github.com/iamskok/use-font-face-observer)
-
-| Property  | Type             | Description                                              |
-| :---------| :--------------- | :------------------------------------------------------- |
-| `family`  | string           | The font-family: `Roboto`, `Inter`, `Open Sans`, etc     |
-| `weight`  | string or number | The font-weight: `normal`, `bold`, `800`, etc            |
-| `style`   | string           | The font-style: `normal`, `italic`, `oblique`            |
-| `stretch` | string           | The font stretch: `normal`, `condensed`, `expanded`, etc |
-
-Styling
-----
-
-You can use the CSS transition property to adjust the speed and duration of the animation completely.  Can you find a neat transition animation? Please share! :)
-
-```css
-.text-swap .word .letter {
-    transition: all, 2s, cubic-bezier(0.1, 0.7, 1.0, 0.1), 2s;
-}
-```
+| 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
 ----
@@ -117,10 +96,17 @@ To run demo locally:
 
 and a browser will open to the demo.
 
+If you receive `Invalid hook call` errors because you are linking this module, you may need to point this library's React to your app's installed React so there is only one copy.
+
+```
+npm link ../my-app/node_modules/react
+npm link ../my-app/node_modules/react-dom
+```
+
 Future Ideas
 ----
 
-- Supply different animation easing.
+- Supply different animation easing. Done!
 
 
 License

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.
@@ -44,7 +47,9 @@ function TextSwap(_ref) {
     randomReverseMin,
     randomReverseMax,
     loopAnimation,
-    waitToStart
+    waitToStart,
+    transitionDuration,
+    timingFunction
   } = animationOptions;
   (0, _react.useEffect)(() => {
     const swaps = [];
@@ -167,57 +172,61 @@ function TextSwap(_ref) {
     setTimeout(() => {
       animateFunc();
     }, waitToStart);
-  }, [lettersRefs1, lettersRefs2, loopAnimation, updateAnimation, randomReverseMax, randomReverseMin, randomStartMax, randomStartMin, waitToStart, 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) => {
-    // eslint-disable-next-line react/no-array-index-key
-    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) => {
-    // eslint-disable-next-line react/no-array-index-key
-    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;
-    if (playing) {
-      const left = "".concat(dest.rect.x, "px");
-      letterStyles = {
-        left
-      };
-    } else {
-      const left = "".concat(src.rect.x, "px");
-      letterStyles = {
-        left
-      };
-    }
-    if (disappear) {
-      letterStyles.opacity = 0;
-    }
-    return /*#__PURE__*/_react.default.createElement("span", {
-      key: id,
-      className: "letter",
-      style: letterStyles
-    }, letter);
-  })));
+  }, [lettersRefs1, lettersRefs2, loopAnimation, updateAnimation, randomReverseMax, randomReverseMin, randomStartMax, randomStartMin, waitToStart, transitionDuration, timingFunction, words]);
+  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,26 +4,28 @@ 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.
- * @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
- * @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
- * @property {number} loopAnimation The amount of time for each full loop of the animation
- * @property {number} waitToStart The amount of time to wait before beginning the animation on start up
+ * @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 */
-exports.DEFAULT_WORDS = DEFAULT_WORDS;
-const DEFAULT_ANIMATION_OPTIONS = {
-  randomStartMin: 500,
-  randomStartMax: 500,
-  randomReverseMin: 8000,
-  randomReverseMax: 8000,
+const DEFAULT_ANIMATION_OPTIONS = exports.DEFAULT_ANIMATION_OPTIONS = {
+  randomStartMin: 0,
+  randomStartMax: 3000,
+  randomReverseMin: 6000,
+  randomReverseMax: 9000,
   loopAnimation: 12000,
-  waitToStart: 0
-};
-exports.DEFAULT_ANIMATION_OPTIONS = DEFAULT_ANIMATION_OPTIONS;
+  waitToStart: 0,
+  transitionDuration: 1000,
+  timingFunction: 'ease-in-out'
+};

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,34 +1,29 @@
 "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"));
-var _useFontFaceObserver = _interopRequireDefault(require("use-font-face-observer"));
+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); }
-/**
- * @typedef FontToObserve A description of an embedded font to observe and wait until loaded.
- * @property {string} [family] The font-family: Roboto, Inter, Open Sans, etc
- * @property {string|number} [weight] The font-weight: normal, bold, 800, etc
- * @property {string} [style] The font-style: normal, italic, oblique
- * @property {string} [stretch] The font stretch: normal, condensed, expanded, etc
- */
-
-/**
+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.
- * @param {FontToObserve} [fontToObserve] A description of an embedded font to observe and wait until loaded.
+ * @param {string} [fontToObserve] A description of an embedded font to observe and wait until loaded.
  * @returns {JSX.Element|null}
  */
 function Loader(_ref) {
@@ -37,14 +32,14 @@ function Loader(_ref) {
     animationOptions = {},
     fontToObserve
   } = _ref;
+  const isFontLoaded = (0, _useFonts.default)(fontToObserve);
   const animOptions = _objectSpread(_objectSpread({}, _constants.DEFAULT_ANIMATION_OPTIONS), animationOptions);
-  const isFontLoaded = (0, _useFontFaceObserver.default)(fontToObserve ? [fontToObserve] : []);
   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 ? /*#__PURE__*/_react.default.createElement(_TextSwap.default, {
+  return isFontLoaded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextSwap.default, {
     words: [word1, word2],
     animationOptions: animOptions
   }) : null;

package/dist/components/index.scss

@@ -32,8 +32,7 @@
         .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;
+            transition: left 2s ease-in-out, top 2s ease-in-out;
         }
     }
 }

package/dist/components/useFonts.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useFonts;
+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++) {
+    fontNames[_key] = arguments[_key];
+  }
+  const [isLoaded, setIsLoaded] = (0, _react.useState)(false);
+  (0, _react.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 \"".concat(fontName, "\"")))).then(() => {
+      setIsLoaded(true);
+    });
+  }, [fontNames]);
+  return isLoaded;
+}
+;

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.3.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,27 +29,30 @@
         "rearrange"
     ],
     "dependencies": {
-        "core-js": "^3.18.3",
-        "use-font-face-observer": "^1.1.39"
+        "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": [