react-text-swap-animation 1.3.0 → 1.5.0

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,31 +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={{ family: 'Open Sans' }} />
-
-            <br />
-            <br />
-
-            <TextSwap fontToObserve={{ family: 'Open Sans' }} words={['a witty saying', 'proves nothing']} />
-
-            <br />
-            <br />
-
-            <TextSwap fontToObserve={{ family: 'Open Sans' }} words={['don\'t be sad it\'s over', 'be happy that it happened']} />
-
-            <br />
-            <br />
-
-            <TextSwap fontToObserve={{ family: 'Open Sans' }} words={['debit card', 'bad credit']} />
-        </div>
-    </React.StrictMode>,
-    document.getElementById('root'),
-);

package/src/lib/components/TextSwap.jsx

@@ -1,200 +0,0 @@
-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,
-    } = 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, words]);
-
-    return (
-        <div className="text-swap">
-            <div className="word word-1 hidden">
-                {
-                    [...words[0]].map((letter, i) => {
-                        // eslint-disable-next-line react/no-array-index-key
-                        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) => {
-                        // eslint-disable-next-line react/no-array-index-key
-                        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;
-                        if (playing) {
-                            const left = `${dest.rect.x}px`;
-                            letterStyles = { left };
-                        }
-                        else {
-                            const left = `${src.rect.x}px`;
-                            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,21 +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
- * @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
- */
-
-/** @type AnimationOptions */
-export const DEFAULT_ANIMATION_OPTIONS = {
-    randomStartMin: 500,
-    randomStartMax: 500,
-    randomReverseMin: 8000,
-    randomReverseMax: 8000,
-    loopAnimation: 12000,
-    waitToStart: 0,
-};

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,38 +0,0 @@
-import React from 'react';
-import useFontFaceObserver from 'use-font-face-observer';
-import TextSwap from './TextSwap';
-import { DEFAULT_ANIMATION_OPTIONS, DEFAULT_WORDS } from './constants';
-
-import './index.css';
-
-/**
- * @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
- */
-
-/**
- * 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.
- * @returns {JSX.Element|null}
- */
-export default function Loader({ words = DEFAULT_WORDS, animationOptions = {}, fontToObserve }) {
-    const animOptions = {
-        ...DEFAULT_ANIMATION_OPTIONS,
-        ...animationOptions,
-    };
-
-    const isFontLoaded = useFontFaceObserver(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 ? <TextSwap words={[word1, word2]} animationOptions={animOptions} /> : null;
-}