@matteodicristofalo/text-animations 1.0.1 → 1.0.3

package/README.md

@@ -1,4 +1,4 @@
-# @mdc/text-animations
+# @matteodicristofalo/text-animations
 
 This library provides a set of React components to animate text
 

package/dist/index.css

@@ -1,6 +1,9 @@
 .split-text-reveal-module_text__-9O5o {
   position: relative;
 }
+.split-text-reveal-module_text__-9O5o .split-text-reveal-module_is-hidden__2J8-i {
+  opacity: 0;
+}
 .split-text-reveal-module_text__-9O5o .split-text-reveal-module_container__mkD-P {
   display: inline-flex;
   overflow: hidden;

package/dist/index.js

@@ -1,3 +1,4 @@
+'use client';
 import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
 
 function round(num, digits) {
@@ -76,34 +77,38 @@ function useIntersectionObserver(ref, options) {
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-var styles$1 = {"text":"split-text-reveal-module_text__-9O5o","container":"split-text-reveal-module_container__mkD-P","animate":"split-text-reveal-module_animate__y6o78"};
+var styles$1 = {"text":"split-text-reveal-module_text__-9O5o","is-hidden":"split-text-reveal-module_is-hidden__2J8-i","container":"split-text-reveal-module_container__mkD-P","animate":"split-text-reveal-module_animate__y6o78"};
 
 var DEFAULT_DURATION$1 = 0.5;
 var DEFAULT_STAGGER$1 = 0.01;
 function SplitTextReveal(_a) {
     var _b;
     var text = _a.text, _c = _a.splitType, splitType = _c === void 0 ? "char" : _c, revealOptions = _a.revealOptions;
+    var _d = useState(false), hasBeenMounted = _d[0], setHasBeenMounted = _d[1];
     var ref = useRef(null);
     var memoizedOptions = useMemo(function () { return ({ once: true, threshold: 0.1 }); }, []);
     var isInView = useIntersectionObserver(ref, memoizedOptions);
     var transitionDuration = (revealOptions === null || revealOptions === void 0 ? void 0 : revealOptions.duration) || DEFAULT_DURATION$1;
     var transitionStagger = (revealOptions === null || revealOptions === void 0 ? void 0 : revealOptions.stagger) || DEFAULT_STAGGER$1;
-    var splitFn = useMemo(function () {
+    var splittedText = useMemo(function () {
         switch (splitType) {
             case "sentence":
-                return sentences;
+                return sentences(text);
             case "word":
-                return words;
+                return words(text);
             case "char":
-                return characters;
+                return characters(text);
         }
-    }, [splitType]);
+    }, [splitType, text]);
+    useEffect(function () {
+        setHasBeenMounted(true);
+    }, []);
     return (React.createElement("span", { ref: ref, className: clsx(styles$1["text"], (_b = {}, _b[styles$1["animate"]] = isInView, _b)), style: {
             "--var-duration": "".concat(transitionDuration, "s"),
-        } }, splitFn(text).map(function (el, i) { return (React.createElement("span", { key: i, className: styles$1["container"] },
+        } }, hasBeenMounted ? (splittedText.map(function (el, i) { return (React.createElement("span", { key: i, className: styles$1["container"] },
         React.createElement("span", { style: {
                 "--var-delay": "".concat(round(transitionStagger * i, 3), "s"),
-            } }, el))); })));
+            } }, el))); })) : (React.createElement("span", { className: styles$1["is-hidden"] }, text))));
 }
 
 var styles = {"text":"split-text-rotate-module_text__xzran","container":"split-text-rotate-module_container__EAJkE","char":"split-text-rotate-module_char__PYJ-k"};
@@ -112,9 +117,12 @@ var DEFAULT_DURATION = 0.25;
 var DEFAULT_STAGGER = 0.025;
 function SplitTextRotate(_a) {
     var text = _a.text, rotateOptions = _a.rotateOptions;
-    var transitionDuration = (rotateOptions === null || rotateOptions === void 0 ? void 0 : rotateOptions.duration) || DEFAULT_DURATION;
-    var transitionStagger = (rotateOptions === null || rotateOptions === void 0 ? void 0 : rotateOptions.stagger) || DEFAULT_STAGGER;
-    var splittedText = characters(text);
+    var _b = useState(false), hasBeenMounted = _b[0], setHasBeenMounted = _b[1];
+    var splittedText = useMemo(function () { return characters(text); }, [text]);
+    var _c = useMemo(function () { return ({
+        transitionDuration: (rotateOptions === null || rotateOptions === void 0 ? void 0 : rotateOptions.duration) || DEFAULT_DURATION,
+        transitionStagger: (rotateOptions === null || rotateOptions === void 0 ? void 0 : rotateOptions.stagger) || DEFAULT_STAGGER,
+    }); }, [rotateOptions]), transitionDuration = _c.transitionDuration, transitionStagger = _c.transitionStagger;
     var delays = useCallback(function (index) {
         var noElementsZeroBased = splittedText.length - 1;
         return {
@@ -122,15 +130,18 @@ function SplitTextRotate(_a) {
             out: round(transitionStagger * (noElementsZeroBased - index), 3),
         };
     }, [splittedText, transitionStagger]);
+    useEffect(function () {
+        setHasBeenMounted(true);
+    }, []);
     return (React.createElement("span", { className: styles["text"], style: {
             "--var-duration": "".concat(transitionDuration, "s"),
-        } }, Array.from({ length: 2 }).map(function (_, i) { return (React.createElement("span", { key: i, className: styles["container"] }, splittedText.map(function (char, i) {
+        } }, hasBeenMounted ? (Array.from({ length: 2 }).map(function (_, i) { return (React.createElement("span", { key: i, className: styles["container"] }, splittedText.map(function (char, i) {
         var charDelays = delays(i);
         return (React.createElement("span", { key: i, className: styles["char"], style: {
                 "--var-delay-in": "".concat(charDelays.in, "s"),
                 "--var-delay-out": "".concat(charDelays.out, "s"),
             } }, char));
-    }))); })));
+    }))); })) : (React.createElement("span", null, text))));
 }
 
 export { SplitTextReveal, SplitTextRotate };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matteodicristofalo/text-animations",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "React library to animate text",
   "scripts": {
     "build": "rimraf dist && rollup -c",
@@ -27,6 +27,7 @@
     "rollup": "^4.28.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
+    "rollup-preserve-directives": "^1.1.3",
     "sass": "^1.81.0",
     "storybook": "^8.4.6",
     "tslib": "^2.8.1",