react-text-swap-animation 0.1.1 → 1.3.0

package/.eslintrc.js

@@ -1,74 +1,74 @@
 module.exports = {
     extends: [
-        "react-app",
-        "react-app/jest",
+        '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": [
+        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, },
+            'stroustrup',
+            { allowSingleLine: true },
         ],
         curly: 2,
-        "no-use-before-define": [
+        'no-use-before-define': [
             1,
-            "nofunc",
+            'nofunc',
         ],
-        "no-unused-vars": [
+        'no-unused-vars': [
             1,
             {
-                args: "none",
+                args: 'none',
                 ignoreRestSiblings: true,
             },
         ],
-        "arrow-body-style": 0,
-        "no-unused-expressions": [
+        'arrow-body-style': 0,
+        'no-unused-expressions': [
             2,
-            { allowShortCircuit: true, },
+            { allowShortCircuit: true },
         ],
-        "object-curly-spacing": ["warn", "always", { objectsInObjects:true }],
-        "object-curly-newline": ["warn", { multiline: true }],
-        "prefer-const": "warn",
-        "no-restricted-syntax": [
+        'object-curly-spacing': ['warn', 'always', { objectsInObjects: true }],
+        'object-curly-newline': ['warn', { multiline: true }],
+        'prefer-const': 'warn',
+        'no-restricted-syntax': [
             1,
-            "WithStatement",
-            "DebuggerStatement",
+            '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],
+        '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"] }],
+        'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
         // Disable props spreading (<App {...props} />) warning.
-        "react/jsx-props-no-spreading": 0,
+        'react/jsx-props-no-spreading': 0,
         // Throw warning instead of error when using array index as a key.
-        "react/no-array-index-key": 1,
+        'react/no-array-index-key': 1,
         // Allow using (props) => <Component /> and ({propName}) => <Component /> syntax.
-        "react/destructuring-assignment": "off",
+        'react/destructuring-assignment': 'off',
         // Disable <Fragment> => <> replacement. Feel free to change
-        "react/jsx-fragments": "off",
+        'react/jsx-fragments': 'off',
         // Allow modules with named exports only.
-        "import/prefer-default-export": 0,
+        '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"] }],
+        '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",
+    parser: 'babel-eslint',
 };

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

@@ -20,20 +20,27 @@ jobs:
     # 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:
-      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
-      - uses: actions/checkout@v2
-
+      - 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
-        run: yarn
-
-      - name: build
-        run: yarn build-clean
-
-      - name: celebrate
-        run: echo DONE!
+#      - 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/README.md

@@ -5,16 +5,13 @@ 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.
 
-[![build status](https://img.shields.io/github/workflow/status/scottcanoni/react-text-swap-animation/CI?style=for-the-badge)](https://github.com/scottcanoni/react-text-swap-animation/actions)
-[![downloads per month](https://img.shields.io/npm/dm/react-text-swap-animation.svg?style=for-the-badge)](https://www.npmjs.com/package/react-text-swap-animation)
-[![total downloads](https://img.shields.io/npm/dt/react-text-swap-animation.svg?style=for-the-badge)](https://www.npmjs.com/package/react-text-swap-animation)
-[![bundle size](https://img.shields.io/bundlephobia/minzip/react-text-swap-animation?style=for-the-badge)](https://bundlephobia.com/result?p=react-text-swap-animation)
-
 Install
 ----
 
 `yarn add react-text-swap-animation`
+
 or
+
 `npm install react-text-swap-animation`
 
 Demo

package/dist/components/TextSwap.js

@@ -1,26 +1,20 @@
 "use strict";
 
+require("core-js/modules/es.symbol.description.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = TextSwap;
-
 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; }
-
+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); }
 /**
  * Render and animate from one word to another word and back again.
  *
@@ -59,28 +53,28 @@ function TextSwap(_ref) {
       // 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 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 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.
 
+      // If the text wraps then the offset left isn't correct.
       const swap = {
         id: (0, _utils.uuidv4)(),
         // for a unique key
@@ -110,7 +104,6 @@ function TextSwap(_ref) {
       swaps.push(swap);
     });
     setAnimations(swaps);
-
     const animateFunc = () => {
       swaps.forEach((swap, i) => {
         // Animate each character towards the destination
@@ -120,53 +113,57 @@ function TextSwap(_ref) {
             playing: true,
             disappear: false
           });
-
           if (swap.src.letter !== ' ' && swap.dest.letter === ' ') {
             updateAnimation(i, {
               disappear: true
             });
           }
-        }, forwardStartTime); // Half way towards the destination, switch to the destination letter
+        }, forwardStartTime);
 
+        // Halfway towards the destination, switch to the destination letter
         setTimeout(() => {
-          if (swap.src.letter !== ' ' && swap.dest.letter === ' ') {// do nothing
+          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
+        }, forwardStartTime + 500);
 
+        // Animate each character back to their original location
         const reverseStartTime = (0, _utils.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
+        }, reverseStartTime);
 
+        // Half way back to the initial location, switch to the initial letter
         setTimeout(() => {
-          if (swap.dest.letter !== ' ' && swap.src.letter === ' ') {// do nothing
+          if (swap.dest.letter !== ' ' && swap.src.letter === ' ') {
+            // do nothing
           } else {
             updateAnimation(i, {
               letter: swap.src.letter
             });
           }
         }, reverseStartTime + 500);
-      }); // Repeat forever
+      });
 
+      // Repeat forever
       setTimeout(() => {
         animateFunc();
       }, loopAnimation);
-    }; // Start the process
-
+    };
 
+    // Start the process
     setTimeout(() => {
       animateFunc();
     }, waitToStart);
@@ -193,7 +190,7 @@ function TextSwap(_ref) {
     }, letter);
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "word word-animation"
-  }, swapAnimations.map((renderedLetter, i) => {
+  }, swapAnimations.map(renderedLetter => {
     const {
       id,
       letter,
@@ -202,8 +199,7 @@ function TextSwap(_ref) {
       src,
       dest
     } = renderedLetter;
-    let letterStyles = {};
-
+    let letterStyles;
     if (playing) {
       const left = "".concat(dest.rect.x, "px");
       letterStyles = {
@@ -215,11 +211,9 @@ function TextSwap(_ref) {
         left
       };
     }
-
     if (disappear) {
       letterStyles.opacity = 0;
     }
-
     return /*#__PURE__*/_react.default.createElement("span", {
       key: id,
       className: "letter",

package/dist/components/constants.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DEFAULT_WORDS = exports.DEFAULT_ANIMATION_OPTIONS = void 0;
 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
@@ -16,7 +17,6 @@ const DEFAULT_WORDS = ['Text Swap Animation', 'Antitoxin Swamp Tea'];
  */
 
 /** @type AnimationOptions */
-
 exports.DEFAULT_WORDS = DEFAULT_WORDS;
 const DEFAULT_ANIMATION_OPTIONS = {
   randomStartMin: 500,

package/dist/components/index.css

@@ -1,28 +1,32 @@
-.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: all, 2s, cubic-bezier(0.1, 0.7, 1.0, 0.1), 2s;*/
+    transition: all, 2s, ease-in-out, 2s; }

package/dist/components/index.js

@@ -4,25 +4,18 @@ 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"));
-
 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); 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; }
-
+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
@@ -44,9 +37,7 @@ function Loader(_ref) {
     animationOptions = {},
     fontToObserve
   } = _ref;
-
   const animOptions = _objectSpread(_objectSpread({}, _constants.DEFAULT_ANIMATION_OPTIONS), animationOptions);
-
   const isFontLoaded = (0, _useFontFaceObserver.default)(fontToObserve ? [fontToObserve] : []);
   let word1 = words[0];
   let word2 = words[1];

package/dist/index.js

@@ -4,10 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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;

package/dist/utils.js

@@ -5,13 +5,9 @@ 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");
-
 /**
  * Get a random number between `min` and `max`
  * @param {number} min The minimum number you want to include in the random output
@@ -23,11 +19,10 @@ function randomMinMax() {
   let max = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100;
   return Math.floor(Math.random() * (max - min)) + min;
 }
-
 function uuidv4() {
   return 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx'.replace(/[xy]/g, c => {
     const r = Math.random() * 16 | 0,
-          v = c === 'x' ? r : r & 0x3 | 0x8;
+      v = c === 'x' ? r : r & 0x3 | 0x8;
     return v.toString(16);
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-text-swap-animation",
-    "version": "0.1.1",
+    "version": "1.3.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",
@@ -10,14 +10,10 @@
         "analyze": "source-map-explorer 'build/static/js/*.js'",
         "start-js": "react-scripts start",
         "start": "npm-run-all -p watch-css start-js",
-        "start-old": "react-scripts start",
-        "build-old": "react-scripts build",
-        "build-rm": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files",
         "build": "del /Q dist\\* && NODE_ENV=production babel src/lib --out-dir dist --copy-files",
-        "build-clean": "NODE_ENV=production babel src/lib --out-dir dist --copy-files",
-        "build-css": "node-sass-chokidar src/ -o src/",
-        "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
-        "test": "react-scripts test",
+        "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"
     },
     "repository": {
@@ -37,23 +33,20 @@
         "use-font-face-observer": "^1.1.39"
     },
     "peerDependencies": {
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2"
+        "react": "^17.0.2 || ^18.2.0",
+        "react-dom": "^17.0.2 || ^18.2.0"
     },
     "devDependencies": {
-        "@babel/cli": "^7.15.7",
-        "@babel/core": "^7.15.5",
+        "@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",
-        "@testing-library/jest-dom": "^5.11.4",
-        "@testing-library/react": "^11.1.0",
-        "@testing-library/user-event": "^12.1.10",
-        "node-sass-chokidar": "^1.5.0",
         "npm-run-all": "^4.1.5",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
-        "react-scripts": "4.0.3"
+        "react-scripts": "4.0.3",
+        "sass": "^1.57.1"
     },
     "eslintConfig": {
         "extends": "react-app"

package/public/index.html

@@ -1,20 +1,19 @@
-<!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" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <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>
+<!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/index.js

@@ -11,20 +11,20 @@ ReactDOM.render(
 
             <TextSwap fontToObserve={{ family: 'Open Sans' }} />
 
-            <br/>
-            <br/>
+            <br />
+            <br />
 
-            <TextSwap fontToObserve={{ family: 'Open Sans' }} words={["a witty saying", "proves nothing"]}  />
+            <TextSwap fontToObserve={{ family: 'Open Sans' }} words={['a witty saying', 'proves nothing']} />
 
-            <br/>
-            <br/>
+            <br />
+            <br />
 
-            <TextSwap fontToObserve={{ family: 'Open Sans' }} words={["don't be sad it's over", "be happy that it happened"]}  />
+            <TextSwap fontToObserve={{ family: 'Open Sans' }} words={['don\'t be sad it\'s over', 'be happy that it happened']} />
 
-            <br/>
-            <br/>
+            <br />
+            <br />
 
-            <TextSwap fontToObserve={{ family: 'Open Sans' }} words={["debit card", "bad credit"]} />
+            <TextSwap fontToObserve={{ family: 'Open Sans' }} words={['debit card', 'bad credit']} />
         </div>
     </React.StrictMode>,
     document.getElementById('root'),

package/src/lib/components/TextSwap.jsx

@@ -20,7 +20,7 @@ export default function TextSwap({ words, animationOptions }) {
             newState[i] = {
                 ...prevState[i],
                 ...update,
-            }
+            };
 
             return newState;
         });
@@ -43,7 +43,7 @@ export default function TextSwap({ words, animationOptions }) {
             // 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;
+                        && destLettersPairedByIndex[srcIndex] !== true;
             });
 
             // If no matching character
@@ -106,7 +106,7 @@ export default function TextSwap({ words, animationOptions }) {
                     }
                 }, forwardStartTime);
 
-                // Half way towards the destination, switch to the destination letter
+                // Halfway towards the destination, switch to the destination letter
                 setTimeout(() => {
                     if (swap.src.letter !== ' ' && swap.dest.letter === ' ') {
                         // do nothing
@@ -170,10 +170,10 @@ export default function TextSwap({ words, animationOptions }) {
             </div>
             <div className="word word-animation">
                 {
-                    swapAnimations.map((renderedLetter, i) => {
+                    swapAnimations.map((renderedLetter) => {
                         const { id, letter, playing, disappear, src, dest } = renderedLetter;
 
-                        let letterStyles = {};
+                        let letterStyles;
                         if (playing) {
                             const left = `${dest.rect.x}px`;
                             letterStyles = { left };

package/src/lib/components/index.css

@@ -1,28 +1,32 @@
-.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: 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

@@ -20,7 +20,7 @@ import './index.css';
  * @param {FontToObserve} [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 }) {
+export default function Loader({ words = DEFAULT_WORDS, animationOptions = {}, fontToObserve }) {
     const animOptions = {
         ...DEFAULT_ANIMATION_OPTIONS,
         ...animationOptions,

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/react-text-swap-animation.iml" filepath="$PROJECT_DIR$/.idea/react-text-swap-animation.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/react-text-swap-animation.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>

package/.idea/watcherTasks.xml

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectTasksOptions" suppressed-tasks="SCSS" />
-</project>